import React, {useEffect, useState} from 'react';
import {RefreshControl, ScrollView} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {getDeviceName} from 'react-native-device-info';
import {useNavigation} from '@react-navigation/native';
import useUser from '@contexts/user';
import Container from '@components/Container';
// import THEME from '@styles/theme';
import DocumentIcon from '@assets/svg/DocumentIcon';
import TelephoneIcon from '@assets/svg/TelephoneIcon';
import RightArrowIcon from '@assets/svg/RightArrowIcon';
import LogoutIcon from '@assets/svg/LogoutIcon';
import {TERMS_AND_CONDITION} from '@constants/navigation/terms-and-condition';
// import {EDIT_DETAILS} from '@constants/navigation/edit-details';
import {CONTACT_US} from '@constants/navigation/contact-us';
import {
  Title,
  PhoneNumber,
  // EditDetailsButton,
  Options,
  Option,
  OptionTitle,
} from '@styles/screens/profile';

export const WALLET_KEY = '@WALLET_NAME';

const Profile = () => {
  const {logout, getPhoneNumber} = useUser();
  const navigation = useNavigation<any>();
  const [phoneNumber, setPhoneNumber] = useState<string | undefined | null>();
  const [walletName, setWalletName] = useState<string | undefined | null>();

  useEffect(() => {
    (async () => {
      if (!phoneNumber) {
        const value = await getPhoneNumber();
        setPhoneNumber(value);
      }
    })();
  }, [phoneNumber, getPhoneNumber]);

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', async () => {
      const value = await AsyncStorage.getItem(WALLET_KEY);
      const deviceName = await getDeviceName();
      setWalletName(value || `Wallet-${deviceName}`);
    });

    return unsubscribe;
  }, [navigation]);

  const onRefresh = async () => {
    const value = await AsyncStorage.getItem(WALLET_KEY);
    const deviceName = await getDeviceName();
    setWalletName(value || `Wallet-${deviceName}`);
  };

  return (
    <Container header={{showBackButton: false, title: 'Profile'}}>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={false} onRefresh={onRefresh} />
        }>
        <Title testID="wltNam">{walletName}</Title>
        <PhoneNumber testID="usrNum">+91 {phoneNumber}</PhoneNumber>
        {/* <EditDetailsButton
        title="Edit details"
        labelStyles={{color: THEME?.INFO?.LIGHT}}
        onPress={() => navigation.navigate({name: EDIT_DETAILS.SCREEN})}
      /> */}

        <Options>
          <Option
            borderBottom={true}
            onPress={() =>
              navigation.navigate({
                name: TERMS_AND_CONDITION.SCREEN,
                params: {showConsentCheckbox: false},
              })
            }
            testID="tncLnk">
            <DocumentIcon />
            <OptionTitle>Terms and conditions & privacy policy</OptionTitle>
            <RightArrowIcon />
          </Option>
          <Option
            onPress={() => navigation.navigate({name: CONTACT_US.SCREEN})}
            testID="cntUsLnk">
            <TelephoneIcon />
            <OptionTitle>Contact us</OptionTitle>
            <RightArrowIcon />
          </Option>
        </Options>

        <Option
          background={true}
          borderRadius={true}
          onPress={logout}
          testID="lgOutLnk">
          <LogoutIcon />
          <OptionTitle>Logout</OptionTitle>
        </Option>
      </ScrollView>
    </Container>
  );
};

export default Profile;