import React, { PureComponent } from 'react';
import {
  Animated,
  Text,
  TouchableOpacity,
  Dimensions,
  View,
} from 'react-native';
import { Header } from 'react-navigation';
import { Spinner } from '@components';
import { BalanceMode, InnerContainerMode } from '@utils/enums';
import { WHITE } from '@styles/styles';
import {
  widthPercentageToDP,
  heightPercentageToDP,
} from '@utils/stylesFunctions';
import {
  styles,
  IconItem,
  InnerView,
  HeaderInnerViewContainer,
  IconClose,
  BalanceHeaderContainer,
  CloseIconContainer,
  BalanceHeaderText,
  BalanceHeaderSubtext,
  MenuItemInnerViewContainer,
} from './Menu.styles';

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

const Saldo = '111.250,50';
const Processing = undefined;
const Blocked = undefined;

const SaldoContainer = ({ opacityBalance, saldo, mode }) => {
  if (mode === BalanceMode.SHOWBALANCE) {
    return (
      <Animated.View style={[styles.inner, { opacity: opacityBalance }]}>
        <Text style={styles.balanceText}>{saldo || ''}</Text>
        <IconItem name="arrow-up" />
      </Animated.View>
    );
  }
  if (mode === BalanceMode.ERROR) {
    return (
      <Animated.View style={[styles.inner, { opacity: opacityBalance }]}>
        <IconItem name="alert-circle" fontSize={30} />
      </Animated.View>
    );
  }
  if (mode === BalanceMode.LOADING) {
    return (
      <Animated.View style={[styles.inner, { opacity: opacityBalance }]}>
        <Spinner fontSize={30} color={WHITE} />
      </Animated.View>
    );
  }
  if (mode === BalanceMode.NONE) {
    return (
      <Animated.View style={[styles.inner, { opacity: opacityBalance }]} />
    );
  }
};

const HeaderInnerContent = ({ saldo, mode, blocked, processing }) => {
  const text = mode === BalanceMode.SHOWBALANCE ? saldo : 'saldo indisponível';
  return (
    <>
      <BalanceHeaderText>{text}</BalanceHeaderText>
      {blocked && (
        <BalanceHeaderSubtext>Bloqueado R$ {blocked}</BalanceHeaderSubtext>
      )}
      {processing && (
        <BalanceHeaderSubtext>
          Em Processamento R$ {processing}
        </BalanceHeaderSubtext>
      )}
    </>
  );
};

const InnerContainer = ({
  mode,
  children,
  opacityInner,
  saldo,
  blocked,
  processing,
}) => {
  return (
    <Animated.View style={[styles.innerContainer, { opacity: opacityInner }]}>
      {/* header */}
      <HeaderInnerViewContainer>
        <BalanceHeaderContainer>
          <HeaderInnerContent
            saldo={saldo}
            mode={mode}
            blocked={blocked}
            processing={processing}
          />
        </BalanceHeaderContainer>
        <CloseIconContainer>
          <IconClose name="x" />
        </CloseIconContainer>
      </HeaderInnerViewContainer>

      {/* menu itens */}
      <MenuItemInnerViewContainer />
    </Animated.View>
  );
};

export class Menu extends PureComponent {
  state = {
    width: new Animated.Value(widthPercentageToDP(Saldo.length <= 8 ? 45 : 50)),
    height: new Animated.Value(heightPercentageToDP(8)),
    opacityBalance: new Animated.Value(1),
    opacityInner: new Animated.Value(0),
    expanded: false,
  };

  animate = (positionRight: number, positionBottom: number) => {
    this.setState((prevState: State) => ({
      expanded: !prevState.expanded,
    }));

    // pegar do arquivo de config
    const widthScreen = Dimensions.get('window').width;
    const heightScreen = Dimensions.get('window').height;
    const headerHeight = Header.HEIGHT;
    const {
      width,
      height,
      expanded,
      opacityBalance,
      opacityInner,
    } = this.state;

    if (!expanded) {
      Animated.sequence([
        Animated.timing(opacityBalance, {
          toValue: 0,
          duration: 1,
        }),

        Animated.parallel([
          Animated.timing(width, {
            toValue: widthScreen - positionRight * 2,
            duration: 300,
          }),
          Animated.timing(height, {
            toValue: heightScreen - positionBottom - headerHeight - 50,
            duration: 300,
          }),
        ]),

        // view inner
        Animated.timing(opacityInner, {
          toValue: 1,
          duration: 300,
        }),
      ]).start();
    } else {
      Animated.sequence([
        Animated.parallel([
          Animated.timing(width, {
            toValue: widthPercentageToDP(Saldo.length <= 8 ? 45 : 50),
            duration: 300,
          }),
          Animated.timing(height, {
            toValue: heightPercentageToDP(8),
            duration: 300,
          }),
        ]),
        Animated.timing(opacityBalance, {
          toValue: 1,
          duration: 100,
        }),
        Animated.timing(opacityInner, {
          toValue: 0,
          duration: 300,
        }),
      ]).start();
    }
  };

  render() {
    const { positionRight, positionBottom } = this.props;
    const {
      width,
      height,
      opacityBalance,
      showBalance,
      opacityInner,
      expanded,
    } = this.state;
    return (
      <AnimatedTouchable
        style={[
          styles.container,
          {
            width,
            height,
            bottom: positionBottom,
            right: positionRight,
          },
        ]}
        onPress={() => this.animate(positionRight, positionBottom)}
        activeOpacity={1}
      >
        <SaldoContainer
          mode={BalanceMode.SHOWBALANCE}
          saldo={Saldo}
          opacityBalance={opacityBalance}
        />
        {expanded && (
          <InnerContainer
            mode={BalanceMode.ERROR}
            opacityInner={opacityInner}
            blocked={Blocked}
            processing={Processing}
            saldo={Saldo}
          />
        )}
      </AnimatedTouchable>
    );
  }
}