import React, { useEffect, useState, useRef } from 'react';
import { Dimensions, Platform } from 'react-native';
import { Nullable } from 'tsdef';
import { SBox } from '../s-components/layout/s-box';
import { SFigureTitle } from '../s-components/s-figure-title';
import { SFigureMessage } from '../s-components/s-figure-message';
import { Placeholder } from './placeholder';
import { getFigureStyles } from '../transducers';
import { SFigureContainer } from '../s-components/s-figure-container';
import { inputFocus$ } from './input';

const { height } = Dimensions.get('window');

const getWinWidth = () => Dimensions.get('window').width - 32;

type TProps = {
  verticalOffset?: number;
  placeholderHeight: number;
  placeholderBottomOffset?: number;
  title?: string;
  renderTitle?: () => Nullable<React.ReactElement>;
  message?: string;
  renderMessage?: () => React.ReactElement | null;
  renderFooter?: () => React.ReactElement;
  variant?: string;
  fullscreen?: boolean;
  addBottomIndents?: boolean;
  color?: string;
  withAnimation?: boolean;
  keyboardHiddenMargin?: number;
  keyboardDisplayedMargin?: number;
};

export const Figure: React.FC<TProps> = props => {
  const width = useRef(getWinWidth());
  const [isKeyboardHidden, setIsKeyboardHidden] = useState(true);

  useEffect(() => {
    const focusSub = inputFocus$.subscribe(isFocus => {
      setIsKeyboardHidden(!isFocus);
    });

    return () => {
      focusSub.unsubscribe();
    };
  }, []);

  const {
    verticalOffset,
    renderTitle,
    title,
    renderMessage,
    message,
    variant,
    fullscreen,
    renderFooter,
    placeholderHeight,
    placeholderBottomOffset,
    keyboardHiddenMargin,
    keyboardDisplayedMargin,
    addBottomIndents,
    color,
    withAnimation,
  } = props;
  const viewTopMargin = isKeyboardHidden
    ? keyboardHiddenMargin
    : keyboardDisplayedMargin;
  const {
    marginTop,
    marginBottom,
    paddingTop,
    justifyPosition,
  } = getFigureStyles(height!, verticalOffset!, addBottomIndents!, fullscreen!);

  return (
    <SFigureContainer
      justifyContent={justifyPosition}
      mt={marginTop}
      mb={marginBottom}
      pt={paddingTop}
      pb={paddingTop}
      testID="figure"
    >
      <SBox width={1} alignItems="center" mt={viewTopMargin}>
        {variant ? (
          <Placeholder
            withAnimation={withAnimation}
            variant={variant}
            baseWidth={width.current}
            baseHeight={placeholderHeight}
            marginBottom={placeholderBottomOffset}
          />
        ) : null}
        {renderTitle ? (
          renderTitle()
        ) : title ? (
          <SFigureTitle mb={11} color={color}>
            {title}
          </SFigureTitle>
        ) : null}
        {renderMessage ? (
          renderMessage()
        ) : message ? (
          <SFigureMessage px={20}>{message}</SFigureMessage>
        ) : null}
        {renderFooter ? renderFooter() : null}
      </SBox>
    </SFigureContainer>
  );
};

Figure.defaultProps = {
  verticalOffset: 0,
  title: '',
  message: '',
  fullscreen: false,
  addBottomIndents: false,
  color: 'white',
  withAnimation: false,
  keyboardHiddenMargin: Platform.OS === 'ios' ? -10 : 50,
  keyboardDisplayedMargin: -12,
};