import React, {useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
  Image,
} from 'react-native';
import {
  Container,
  Icon,
  ModalOTP,
  ModalError,
  ModalLanguage,
  Button,
} from 'components';
import {Colors} from 'global-styles';
import styles from './styles';
import {useKeyboard} from 'utilities';
import useLogin from './useLogin';
import {useTranslation} from 'react-i18next';

const Login = ({route, navigation}) => {
  const {t, i18n} = useTranslation();
  const keyboardHeight = useKeyboard();
  const {
    phone,
    setPhone,
    modalOTP,
    otpCode,
    setOTPCode,
    loading,
    error,
    modal,
    setModal,
    setModalLanguage,
    modalLanguage,
  } = useLogin(navigation);
  return (
    <Container backgroundColor={Colors.WHITE}>
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => setModalLanguage(true)}
          style={styles.translateButton}>
          <Icon
            name="translate"
            type="MaterialCommunityIcons"
            style={styles.translateButtonIcon}
          />
          <Image
            source={
              i18n.language === 'id'
                ? require('assets/images/indonesia-flag.png')
                : require('assets/images/english-flag.png')
            }
            style={styles.translateButtonImage}
          />
        </TouchableOpacity>
        <View style={styles.boardingSection}>
          <Image
            source={require('assets/images/chef-pana.png')}
            style={styles.boardingImage}
          />
          <View style={styles.boardingContentSection}>
            <Text style={styles.boardingTitle}>{t('welcome_text')}</Text>
            <Text style={styles.boardingSubTitle}>
              Through a wide range of caterers & brand partners, personalized
              services
            </Text>
          </View>
        </View>
        <View style={styles.wrapper}>
          <View style={styles.formSection}>
            <Text style={styles.formLabel}>
              {t('phone_input')} <Text style={{color: Colors.PRIMARY}}>*</Text>
            </Text>
            <View style={styles.postSection}>
              <View style={styles.numberIdSection}>
                <Text style={styles.numberIdText}>🇮🇩 +62</Text>
              </View>
              <View style={styles.inputSection}>
                <TextInput
                  style={styles.input}
                  value={phone}
                  onChangeText={val => setPhone(val)}
                  placeholder="Nomor HP"
                  keyboardType="number-pad"
                  autoFocus={true}
                />
                <TouchableOpacity onPress={() => setPhone('')}>
                  <Icon
                    name="closecircle"
                    type="AntDesign"
                    style={styles.cleanInputIcon}
                  />
                </TouchableOpacity>
              </View>
            </View>
            {error?.phone?.message && (
              <Text style={styles.error}>{error.phone.message}</Text>
            )}
            <TouchableOpacity style={styles.phoneIssueButton}>
              <Text style={styles.phoneIssueButtonTitle}>
                {t('phone_issue')}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.buttonSignInSection(keyboardHeight)}>
            <Button
              title={t('login')}
              onPress={() => alert('login')}
              disabled={loading ? true : phone === '' ? true : false}
              loading={loading}
            />
            <Text style={styles.textOr}>{t('or_text')}</Text>
            <Button
              title={t('register')}
              onPress={() => navigation.navigate('Register')}
              loading={loading}
              outline
            />
          </View>
        </View>
      </View>
      <ModalOTP
        isVisible={modalOTP.visible}
        code={otpCode}
        setCode={setOTPCode}
        loading={modalOTP.loading}
        error={error?.otp}
        onSubmit={() => alert('token verified')}
      />
      <ModalError
        isVisible={modal.visible}
        message={modal.message}
        onClose={() => setModal({visible: false, message: ''})}
      />
      <ModalLanguage
        isVisible={modalLanguage}
        onSave={() => setModalLanguage(false)}
        onClose={() => setModalLanguage(false)}
      />
    </Container>
  );
};

export default Login;
