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} from 'react-native';
import {HelperText} from 'react-native-paper';
import {
  container,
  ItemFlex,
  ItemFlex2,
  direction,
  pageTitleBox,
  pageTitle,
  textColor,
} from '../resoureces/styles/GlobalStyles';

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('http://192.168.0.138:80/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('회원가입이 완료되었습니다.');
          navigation.navigate('Login');
        } else {
          alert('입력 정보를 확인해주세요.');
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const validation = () => {
    fetch('http://192.168.0.138:80/auth/id', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: userId,
      }),
    })
      .then(response => response.json())
      .then(data => {
        if (data.message === 'Success') {
          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>
            <Input
              placeholder={'사용하실 아이디'}
              onChangeText={userId => {
                setUserId(userId);
              }}
              onBlur={validation()}
            />
            {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, styles.marginRight]}>
                  <Input
                    placeholder={'년(4자)'}
                    onChangeText={year => {
                      setYear(year);
                    }}
                  />
                </View>
                <View style={[ItemFlex, styles.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, itemIndex) => setUserSex(itemValue)}>
                <Picker.Item label="남자" value="Man" />
                <Picker.Item label="여자" value="Woman" />
              </Picker>
            </View>
          </View>
          <View>
            <Text style={textColor}>휴대전화</Text>
            <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 style={direction}>
              <View style={[ItemFlex2, styles.marginRight]}>
                <Input
                  placeholder={'전화번호 입력'}
                  onChangeText={phone => {
                    setPhone(phone);
                  }}
                />
              </View>
              <View style={ItemFlex}>
                <Button
                  title={'인증번호받기'}
                  backgroundColor={'#000000'}
                  padding={15}
                  borderRadius={50}
                  color={'#ffffff'}
                  textAlign={'center'}
                  fontSize={10}
                  onPress={() => navigation.navigate('JoinMembers')}
                />
              </View>
            </View>
            <View>
              <Input placeholder={'인증번호 입력'} />
            </View>
            <View>
              <Text style={textColor}>이메일</Text>
              <Input
                placeholder={'이메일'}
                onChangeText={email => {
                  setEmail(email);
                }}
              />
            </View>
          </View>
          <Button
            title={'가입하기'}
            backgroundColor={'#000000'}
            padding={15}
            borderRadius={50}
            color={'#ffffff'}
            textAlign={'center'}
            onPress={joinFetchData}
          />
        </ScrollView>
      </View>
    </View>
  );
}

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