import Button from '../component/Button';
import React, {useState} from 'react';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import Checkbox from '../component/Checkbox';
import Input from '../component/Input';
import {Picker} from '@react-native-picker/picker';
import {
  container,
  pageTitleBox,
  pageTitle,
} from './../resoureces/styles/GlobalStyles';
import {PRIMARY, WHITE} from '../color';

export default function FindIDNow({navigation}) {
  const [iname, setIname] = useState(false);
  const [ename, setEname] = useState(false);
  const [telno, setTelno] = useState(false);
  const [emailadd, setEmailAdd] = useState(false);
  const [ivefi, setIvefi] = useState(false);
  const [evefi, setEvefi] = useState(false);
  const [countryCode, setCountryCode] = useState(false);
  const [numberCheckBox, setNumberCheckBox] = useState(false);
  const [emailCheckBox, setEmailCheckBox] = useState(false);

  return (
    <View style={{flex: 1}}>
      <View style={pageTitleBox}>
        <Text style={pageTitle}>아이디 찾기</Text>
      </View>
      <View style={container}>
        <ScrollView>
          <View>
            <Checkbox
              text={'전화번호로 인증'}
              value={numberCheckBox}
              onValueChange={numberCheckBox => {
                setNumberCheckBox(numberCheckBox);
              }}
            />
            {numberCheckBox ? (
              <View>
                <Input
                  onChangeText={setIname}
                  value={iname}
                  placeholder={'이름'}
                />
                <View style={[styles.picker, styles.paddingVertical]}>
                  <Picker
                    selectedValue={countryCode}
                    onValueChange={(itemValue, itemIndex) =>
                      setCountryCode(itemValue)
                    }>
                    <Picker.Item label="+82" value="Korea" />
                    <Picker.Item label="+1" value="USA" />
                    <Picker.Item label="+81" value="Japan" />
                    <Picker.Item label="+84" value="Vietnam" />
                    <Picker.Item label="+852" value="Hongkong" />
                  </Picker>
                </View>
                <Input
                  onChangeText={setTelno}
                  value={telno}
                  placeholder={'전화번호'}
                  style={styles.inputWidth}
                />
                <Input
                  onChangeText={setIvefi}
                  value={ivefi}
                  placeholder={'인증번호 숫자 6자리'}
                />
                <Button
                  title={'인증'}
                  backgroundColor={PRIMARY.DEFAULT}
                  padding={10}
                  borderRadius={50}
                  marginBottom={10}
                  color={WHITE}
                  textAlign={'center'}
                />
              </View>
            ) : null}
          </View>
          <View>
            <Checkbox
              text={'본인 확인 이메일로 인증'}
              value={emailCheckBox}
              onValueChange={emailCheckBox => {
                setEmailCheckBox(emailCheckBox);
              }}
            />
            {emailCheckBox ? (
              <View>
                <Input
                  onChangeText={setEname}
                  value={ename}
                  placeholder={'이름'}
                />
                <Input
                  onChangeText={setEmailAdd}
                  value={emailadd}
                  placeholder={'이메일주소'}
                />
                <Input
                  onChangeText={setEvefi}
                  value={evefi}
                  placeholder={'인증번호 숫자 6자리'}
                />
                <Button
                  title={'인증'}
                  backgroundColor={PRIMARY.DEFAULT}
                  padding={10}
                  borderRadius={50}
                  marginBottom={10}
                  color={WHITE}
                  textAlign={'center'}
                />
              </View>
            ) : null}
          </View>
          <Button
            title={'확인'}
            backgroundColor={PRIMARY.DEFAULT}
            padding={10}
            borderRadius={50}
            marginBottom={10}
            color={WHITE}
            textAlign={'center'}
          />
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 20,
    marginBottom: 10,
  },
  picker: {
    // borderWidth: 1,
    borderRadius: 50,
    // borderColor: '#5F4BC6',
    marginBottom: 10,
    backgroundColor: PRIMARY.LIGHT,
  },
});