import React, {useEffect, useState} from 'react';
import Button from '../component/Button';
import Input from '../component/Input';
import {Picker} from '@react-native-picker/picker';
import {View, StyleSheet, Text, ScrollView, Alert} from 'react-native';
import {HelperText} from 'react-native-paper';
import {
  container,
  ItemFlex,
  ItemFlex2,
  direction,
  pageTitleBox,
  pageTitle,
  textColor,
  marginRight,
} from '../resoureces/styles/GlobalStyles';
import {url} from '../url';
import {PRIMARY, WHITE} from '../color';

export default function JoinMembers({navigation}) {
  /* 퉥스트 입력 */
  const [userId, setUserId] = useState('');
  const [userPassword, setUserPassword] = useState();
  const [userPasswordCked, setUserPasswordCked] = useState();
  const [name, setName] = useState();
  const [year, setYear] = useState();
  const [month, setMonth] = useState();
  const [day, setDay] = useState();
  const [phone, setPhone] = useState();
  const [email, setEmail] = useState();
  const [selectedLanguage, setSelectedLanguage] = useState();
  const [userSex, setUserSex] = useState();
  const [idchecked, setIdChecked] = useState(false);
  const [pwChecked, setPwChecked] = useState(false);

  const joinFetchData = () => {
    fetch(`${url}/auth/register`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: userId,
        password: userPassword,
        email: email,
        user_sex: userSex,
        phone: phone,
      }),
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        if (data.Authorization === userId) {
          Alert.alert('회원가입이 완료되었습니다.');
          navigation.navigate('Login');
        } else {
          Alert.alert('입력 정보를 확인해주세요.');
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const validation = () => {
    fetch(`${url}/auth/id`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: userId,
      }),
    })
      .then(data => {
        if (data.ok) {
          setIdChecked(true);
        } else {
          setIdChecked(false);
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  return (
    <View style={{flex: 1}}>
      <View style={pageTitleBox}>
        <Text style={pageTitle}>회원가입</Text>
      </View>
      <View style={container}>
        <ScrollView>
          <View style={styles.marginBottom}>
            <Text style={textColor}>아이디</Text>
            <View style={direction}>
              <View style={[ItemFlex2, marginRight]}>
                <Input
                  placeholder={'아이디'}
                  onChangeText={userId => {
                    setUserId(userId);
                  }}
                  // onBlur={validation()}
                />
              </View>
              <View style={ItemFlex}>
                <Button
                  title={'중복확인'}
                  backgroundColor={PRIMARY.DEFAULT}
                  padding={18}
                  borderRadius={50}
                  color={WHITE}
                  textAlign={'center'}
                  fontSize={10}
                  onPress={() => validation()}
                />
              </View>
            </View>
            {userId === '' ? (
              ''
            ) : idchecked ? (
              <HelperText type="info">사용 가능한 아이디 입니다.</HelperText>
            ) : (
              <HelperText type="error">이미 사용중인 아이디 입니다.</HelperText>
            )}
          </View>
          <View style={styles.marginBottom}>
            <View style={styles.marginBottom}>
              <Text style={textColor}>비밀번호</Text>
              <Input
                placeholder={'비밀번호'}
                onChangeText={userPassword => {
                  setUserPassword(userPassword);
                }}
                secureTextEntry={true}
              />
            </View>
            <View>
              <Text style={textColor}>비밀번호 확인</Text>
              <Input
                placeholder={'비밀번호 확인'}
                onChangeText={userPasswordCked => {
                  setUserPasswordCked(userPasswordCked);
                }}
                secureTextEntry={true}
              />
              {userPasswordCked === '' || userPasswordCked === userPassword ? (
                ''
              ) : (
                <HelperText type="error">
                  비밀번호를 다시 확인해주세요.
                </HelperText>
              )}
            </View>
          </View>
          <View style={styles.marginBottom}>
            <View style={styles.marginBottom}>
              <Text style={textColor}>이름</Text>
              <Input
                placeholder={'이름'}
                onChangeText={name => {
                  setName(name);
                }}
              />
            </View>
            <View>
              <Text style={textColor}>생년월일</Text>
              <View style={direction}>
                <View style={[ItemFlex, marginRight]}>
                  <Input
                    placeholder={'년(4자)'}
                    onChangeText={year => {
                      setYear(year);
                    }}
                  />
                </View>
                <View style={[ItemFlex, marginRight]}>
                  <Input
                    placeholder={'월'}
                    onChangeText={month => {
                      setMonth(month);
                    }}
                  />
                </View>
                <View style={ItemFlex}>
                  <Input
                    placeholder={'일'}
                    onChangeText={day => {
                      setDay(day);
                    }}
                  />
                </View>
              </View>
            </View>
          </View>
          <View style={styles.marginBottom}>
            <Text style={textColor}>성별</Text>
            <View style={styles.picker}>
              <Picker
                selectedValue={userSex}
                onValueChange={itemValue => setUserSex(itemValue)}>
                <Picker.Item label="남자" value="Man" />
                <Picker.Item label="여자" value="Woman" />
              </Picker>
            </View>
          </View>
          <View style={styles.picker}>
            <Picker
              selectedValue={selectedLanguage}
              onValueChange={(itemValue, itemIndex) =>
                setSelectedLanguage(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>
          <View>
            <Text style={textColor}>전화번호</Text>
            <View style={direction}>
              <View style={[ItemFlex2, marginRight]}>
                <Input
                  placeholder={'전화번호 입력'}
                  onChangeText={phone => {
                    setPhone(phone);
                  }}
                />
              </View>
              <View style={ItemFlex}>
                <Button
                  title={'인증번호받기'}
                  backgroundColor={PRIMARY.DEFAULT}
                  padding={18}
                  color={WHITE}
                  borderRadius={50}
                  textAlign={'center'}
                  fontSize={10}
                  onPress={() => navigation.navigate('JoinMembers')}
                />
              </View>
            </View>
            <View>
              <Input placeholder={'인증번호 입력'} />
            </View>
          </View>
          <View>
            <Text style={textColor}>이메일</Text>
            <View>
              <View>
                <Input
                  placeholder={'이메일 입력'}
                  onChangeText={email => {
                    setEmail(email);
                  }}
                />
              </View>
            </View>
          </View>
          <Button
            title={'가입하기'}
            backgroundColor={PRIMARY.DEFAULT}
            padding={15}
            color={WHITE}
            borderRadius={50}
            textAlign={'center'}
            onPress={joinFetchData}
          />
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  padding: {
    padding: 10,
  },
  marginBottom: {
    marginBottom: 10,
  },
  picker: {
    borderWidth: 1,
    borderColor: '#dddddd',
    marginBottom: 10,
    backgroundColor: '#ffffff',
  },
  picker: {
    // borderWidth: 1,
    borderRadius: 50,
    // borderColor: '#5F4BC6',
    marginBottom: 10,
    backgroundColor: '#F4F3F9',
  },
});