import React, {useState, useContext, useEffect} from 'react';
import {View, Text, StyleSheet, ScrollView, Alert} from 'react-native';
import Checkbox from '../component/Checkbox';
import Button from '../component/Button';
import {
  container,
  pageTitleBox,
  pageTitle,
} from '../resoureces/styles/GlobalStyles';
import {AuthContext} from '../context/AuthContext';
import {sign} from 'react-native-pure-jwt';
import {useNavigation, CommonActions} from '@react-navigation/native';
import RNRestart from 'react-native-restart';
import {url} from '../url';

export default function MembershipWithdrawal() {
  const {userInfo} = useContext(AuthContext);
  const navigation = useNavigation();

  const [withdrawalCheck, setWithdrawalCheck] = useState(false);
  const [userToken, setUserToken] = useState(null);

  const checkEvent = () => {
    if (withdrawalCheck === false) {
      setWithdrawalCheck(true);
    } else {
      setWithdrawalCheck(false);
    }
  };

  (async function JwtEncode() {
    try {
      let jwtSign = await sign(
        {
          id: userInfo?.id,
          exp: new Date().getTime() + 70,
        },
        'secret',
        {
          alg: 'HS256',
        },
      );
      setUserToken(jwtSign);
    } catch (err) {
      console.error(err);
    }
  })();

  const secession = () => {
    if (withdrawalCheck === true) {
      // console.log("3",parseJWT(userToken));
      fetch(`${url}/auth/secession`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json; charset=UTF-8',
        },
        body: JSON.stringify({token: userToken}),
      })
        .then(response => response.json())
        .then(data => {
          if (data.secession === 'success') {
            Alert.alert(
              '탈퇴 알림',
              '회원탈퇴가 성공적으로 되었습니다. 지금까지 Construction Site Scence Navigation을 이용해주셔서 감사합니다.',
            );
            RNRestart.Restart();
          }
        })
        .catch(err => {
          console.error(err);
        });
    } else {
      Alert.alert('회원탈퇴에 동의하여 주십시오.');
    }
  };

  useEffect(() => {
    console.log('1', userInfo);
    console.log('2', userToken);
  }, []);

  return (
    <View style={{flex: 1}}>
      <View style={pageTitleBox}>
        <Text style={pageTitle}>회원탈퇴</Text>
      </View>
      <View style={container}>
        <ScrollView>
          <View>
            <Text style={styles.title}>회원탈퇴 시</Text>
            <Text style={styles.subTitle}>
              <Text>{userInfo.id} 님의</Text>개인정보 및 Construction Site Scene
              Navigation에서 만들어진, 모든 데이터는 삭제됩니다.
            </Text>
          </View>
          <View>
            <Checkbox
              disabled={false}
              value={withdrawalCheck}
              onValueChange={checkEvent}
              text={'해당 내용을 모두 확인 했으며, 회원탈퇴에 동의합니다.'}
            />
          </View>
          <View>
            <Button
              title={'탈퇴하기'}
              backgroundColor={'#FED049'}
              padding={10}
              marginBottom={10}
              color={'#333333'}
              textAlign={'center'}
              onPress={secession}
            />
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  subTitle: {
    fontSize: 13,
    marginBottom: 50,
  },
});