import React, {Component, useState} from 'react';
import {View, Text} from 'react-native';
import {CONFIRMOTPSMART} from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
import HeaderBack from '../../components/Header/HeaderBack';

import AppText from '../../components/AppText';
import TextField from '../../components/Input/TextField';
import Button from '../../components/Button';
import {connect} from 'react-redux';
import {
  getFontXD,
  HEIGHTXD,
  WIDTHXD,
  checkFormatArray,
} from '../../Config/Functions';
import R from '../../assets/R';
import {getOTPApiSmartOTP} from '../../apis/Functions/users';
import {showLoading, hideLoading} from '../../actions/loadingAction';
import I18n from '../../helper/i18/i18n';
import {TYPE, showAlert} from '../../components/DropdownAlert/index';

const SettingOTP = (props) => {
  const navigatiton = useNavigation();

  const [password, setPassword] = useState('');
  const [password_confirmation, setPassword_confirmation] = useState('');

  const getOTP = async () => {
    const titles = [
      I18n.t('PassGetSmartOTP'),
      I18n.t('ConfirmPassGetSmartOTP'),
    ];
    const index = checkFormatArray([password, password_confirmation]);
    if (index === true) {
      if (password == password_confirmation) {
        props.showLoading();
        const res = await getOTPApiSmartOTP({
          platform: Platform.OS,
          otp_by: props.user.email,
          otp_password: '1234',
          type: 'CREATE_OTP_PASSWORD',
        });
        props.hideLoading();
        if (res.data.code == 200) {
          showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
          navigatiton.navigate(CONFIRMOTPSMART, {
            password,
            password_confirmation,
            isFromTransaction: props.route.params.isFromTransaction,
            setupSmartOTPSuccess: props.route.params.setupSmartOTPSuccess
          });
        } else {
          showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
        }
      } else {
        showAlert(
          TYPE.WARN,
          I18n.t('Notification'),
          'Mật khẩu không trùng nhau!',
        );
      }
    } else {
      showAlert(
        TYPE.WARN,
        I18n.t('Notification'),
        I18n.t('Please_fill_in') + titles[index],
      );
    }
  };

  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'SettingOTP'} />
      <View style={{flex: 1, marginHorizontal: 10, marginTop: 20}}>
        <View style={{flex: 1}}>
          <TextField
            onChangeText={(val) => setPassword(val)}
            maxLength={4}
            isNumber={true}
            title={
              props.language.language == 'vi'
                ? 'Mật khẩu lấy Smart OTP'
                : I18n.t('PassGetSmartOTP')
            }
            isPassWord={true}
          />
          <TextField
            maxLength={4}
            isNumber={true}
            isPassWord={true}
            onChangeText={(val) => setPassword_confirmation(val)}
            title={
              props.language.language == 'vi'
                ? 'Xác nhận mật khẩu lấy Smart OTP'
                : I18n.t('ConfirmPassGetSmartOTP')
            }
          />
        </View>
        <View>
          <Button onClick={getOTP} title={'Xác nhận'} />
        </View>
      </View>
    </View>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
    language: state.languageReducer,
  };
};

export default connect(mapStateToProps, {showLoading, hideLoading})(SettingOTP);