/**
 * @format
 * @flow
 */

import * as React from 'react';
import {
  StyleSheet,
  View,
  Text,
  SafeAreaView,
  ActivityIndicator,
} from 'react-native';
import {NavigationScreenProp} from 'react-navigation';
import SelfieLive from '@krealo/third-party/react-native-selfie-live';
import Button from '@krealo/commons/components/ui/button/Button';
import Colors from '@krealo/commons/platform/Colors';
import FaceTarget from '@krealo/commons/components/face/FaceTarget';
import Heading from '@krealo/commons/components/ui/heading/Heading';
import Paragraph from '@krealo/commons/components/ui/paragraph';

import storageService from '../../../../../commons/storage/storage';
import Camera from '../../../../../components/camera/Camera';
import SelfieService from '../../../commons/services/SelfieService';

type NavigationState = {
};

type Props = {
  navigation: NavigationScreenProp<NavigationState>,
  i18n: Object,
};
type State = {
  selfie: string,
  isLoading: boolean,
  errorTOC: string,
};

// TODO: casos de fallo a implementarse posteriormente
const codeError = {
  0: (nav) => {
    nav.navigate('YoungYearScreen');
  },
  1: (nav) => {
    nav.navigate('BlackList');
  },
};

function errorHanding (code, nav) {
  if (codeError.hasOwnProperty(code)) {
    codeError[code](nav);
  }
}
export default class SelfieCameraScreen extends React.Component<Props, State> {
  camera: ?Camera;

  state = {
    selfie: '',
    isLoading: false,
    errorTOC: '',
  };

  componentWillMount () {
    this.sendInformation.bind(this);
  }

  sendInformation = () => {
    const {navigation} = this.props;
    const {selfie} = this.state;

    const {sidefront, sideback} = navigation.getParam('sides', {});

    const front = sidefront.split('\n').join('');
    const back = sideback.split('\n').join('');
    const face = selfie.split('\n').join('');

    this.setState({isLoading: true});

    SelfieService.postSendSelfie({
      face,
      back,
      front,
    })
      .then((res) => {
        storageService.setItem('@MineStore:userId', res.data.id).then(() => {
          this.setState({isLoading: false});
          navigation.navigate('PersonalInfo', {
            dataUser: res.data,
          });
        });
      })
      .catch((error) => {
        this.setState({errorTOC: error.response.data.message});
        // TODO: Implementar navegación en caso de fallos posteriormente
      })
      .then((res) => {
        this.setState({isLoading: false});
      });
  }

  onPressTakePhoto = async () => {
    if (!this.camera) {
      return;
    }

    this.setState({isLoading: true});

    const options = {
      quality: 1, base64: true, width: 1280, height: 720,
    };

    const data = await this.camera.getCameraRef().takePictureAsync(options);

    this.setState({photo: data.base64, isLoading: false}, () => {
      this.sendInformation();
    });
  }

  onPressSelfieLive = async () => {
    try {
      // TODO: Inyectar API KEY de sandbox a TOC
      const response = await SelfieLive.getSelfieLive('12192c583c5240f88e0f4db584d938f6');

      this.setState({selfie: response}, () => {
        this.sendInformation();
      });
    } catch (e) {
      // TODO: Implementar error en caso falle el llamdo a selfielivew con UI
      console.warn('error :(', e);
    }
  }

  onPressReRegister = () => {
    const {navigation} = this.props;
    navigation.navigate('DocumentScan');
  }

  render () {
    const {i18n} = this.props;
    const {isLoading, selfie, errorTOC} = this.state;
    const hasError = !!errorTOC

    return (
      <SafeAreaView
        accessibilityLabel="selfiecamerascreen.wrapper"
        style={styles.container}
      >

        {selfie ? (
          <View
            accessibilityLabel="selfiecamerascreen.containerwrapper.response"
            style={styles.containerViewResponse}
          >

            {isLoading && (
              <>
                <View
                  accessibilityLabel="selfiecamerascreen.containerstyleactivityindicator"
                  style={styles.activityIndicator}
                >
                  <ActivityIndicator
                    accessibilityLabel="selfiecamerascreen.activityindicator"
                    color={Colors.bluemine}
                    size="large"
                  />
                </View>
                <Text
                  accessibilityLabel="selfiecamerascreen.messagewait"
                  style={styles.descriptionInformation}
                >
                  {i18n.t('onboardingDocumentMessageWait')}
                </Text>
            </>
            )}

            {!isLoading && !hasError && (
              <View
                accessibilityLabel="selfiecamerascreen.containerwrapperstyle.responsewithstyle"
                style={styles.containerViewResponseStyle}
              >

                <View
                  accessibilityLabel="selfiecamerascreen.containerwrappercircle.responseerror"
                  style={styles.containerViewCircle}
                >
                  <Heading
                    accessibilityLabel="selfiecamerascreen.circleinformation.responseerrortext"
                    type="h1"
                    style={styles.circleInformation}
                  >
                    {i18n.t('onboardingDocumentSelfieErroSymbol')}
                  </Heading>
                </View>

                <Heading
                  accessibilityLabel="selfiecamerascreen.informationtitle"
                  type="h1"
                  style={styles.titleInformation}
                >
                  {i18n.t('onboardingDocumentSelfieErroTitle')}
                </Heading>

                <Paragraph
                  accessibilityLabel="selfiecamerascreen.informationdescription"
                  type="default"
                  align="center"
                  style={styles.descriptionInformation}
                >
                  {errorTOC}
                </Paragraph>
                <Button
                  accessibilityLabel="selfiecamerascreen.buttonreregiter"
                  title={i18n.t('onboardingDocumentReRegisterButton')}
                  type="secondaryOnboarding"
                  size="block"
                  onPress={this.onPressReRegister}
                  style={styles.buttonreregister}
                />

              </View>
            )}

          </View>
        ) : (
          <>
            <View
              accessibilityLabel="selfiecamerascreen.containerwrappersvg"
              style={styles.containerFaceSvg}
            >
              <FaceTarget
                accessibilityLabel="selfiecamerascreen.facetarget.resourcesvg"
              />
            </View>

            <Button
              accessibilityLabel="selfiecamerascreen.buttonselfielive.opensdkTOC"
              title={i18n.t('onboardingDocumentTakeSelfieButton')}
              type="darkOnboarding"
              size="md"
              onPress={this.onPressSelfieLive}
              disabled={isLoading}
              style={styles.buttonselfie}
            />
        </>
        )}

      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.selfieBackground,
  },
  containerViewResponse: {
    flex: 1,
    justifyContent: 'center',
  },
  containerViewResponseStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20,
  },
  containerViewCircle: {
    borderRadius: 25,
    width: 50,
    height: 50,
    backgroundColor: Colors.errorTOC,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circleInformation: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  titleInformation: {
    fontSize: 24,
    marginTop: 16,
    color: 'white',
  },
  descriptionInformation: {
    fontSize: 14,
    color: 'white',
    textAlign: 'center',
  },
  containerFaceSvg: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'space-around',
    zIndex: 0,
  },
  activityIndicator: {
    backgroundColor: Colors.activityIndicatorOnBoarding,
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 25,
    alignSelf: 'center',
    marginBottom: 20,
  },
  buttonreregister: {
    marginTop: 10,
    alignSelf: 'center',
    bottom: 0,
  },
  buttonselfie: {
    marginBottom: 20,
    alignSelf: 'center',
    position: 'absolute',
    bottom: 0,
  },
});