import React, {useEffect, useState} from 'react';
import {ScrollView, TouchableOpacity} from 'react-native';
import {useNavigation, useRoute, useIsFocused} from '@react-navigation/native';
import {data} from '@screens/add-credentials/data';
import Container from '@components/Container';
import CheckingModal from '@components/CheckingModal';

import Button from '@components/Button';
import {DIGI_LOCKER} from '@constants/navigation/digi-locker';
import {VERIFY_USER} from '@constants/api';
import useUser from '@contexts/user';

import Search from '@assets/svg/Search';
import Digilocker from '@assets/svg/Digilocker';
import Default from '@assets/svg/Default';
import BlueCheckBox from '@assets/svg/BlueCheckBox';
import {
  Heading,
  SearchWrapper,
  StyledTextInput,
  Card,
  Title,
  IconWrapper,
  StyledIconWrapper,
} from '@styles/components/add-credential-modal';
import {digiLockerAffinidiServiceInstance} from '@services/Axios';

const AddCredentials = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const isFocused = useIsFocused();
  const {getPhoneNumber} = useUser();

  const [cardData, setCardData] = useState(data);
  const [searchKey, setSearchKey] = useState('');
  // const [isUserVerified, setIsUserVerified] = useState(false);
  const [showCheckingModal, setShowCheckingModal] = useState(false);
  const selectedData = cardData.filter(d => d.checked === true);

  useEffect(() => {
    if (searchKey !== '') {
      setCardData(
        cardData.filter(d =>
          d?.title.toLowerCase()?.includes(searchKey.toLowerCase()),
        ),
      );
    } else {
      setCardData(data);
    }

    return;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchKey]);

  const changeCardData = (index: number) => {
    const newData = [...cardData];
    newData[index].checked = !newData[index].checked;
    setCardData(newData);
  };

  useEffect(() => {
    const verifyUser = async () => {
      const {digilocker_token}: any = route?.params;

      if (isFocused && digilocker_token) {
        setShowCheckingModal(true);
        //let isVerifiedUser = false;
        const phoneNumber = await getPhoneNumber();
        const payload = {
          mobile: phoneNumber,
          token: digilocker_token?.access_token,
        };
        try {
          const isUserExists: any =
            await digiLockerAffinidiServiceInstance.post(VERIFY_USER, payload);
          if (!isUserExists?.verified && !isUserExists.error) {
            // show not macthing screen.
            //isVerifiedUser = true;
          }
          //setIsUserVerified(isVerifiedUser);
        } catch (error) {
          console.log(`Error: user verify request , ${error?.message}`);
        } finally {
          setTimeout(() => {
            setShowCheckingModal(false);
          }, 1000);
        }
      }
    };

    verifyUser();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [navigation, isFocused, getPhoneNumber]);

  return (
    <Container header={{title: 'Add Credentials'}}>
      <ScrollView>
        <Heading>Select credentials you wish to add</Heading>
        <SearchWrapper>
          <Search />

          <StyledTextInput
            focusable
            placeholder="Search credential"
            placeholderTextColor="#fff"
            value={searchKey}
            onChangeText={value => {
              setSearchKey(value);
            }}
            style={{color: '#fff'}}
          />
        </SearchWrapper>
        {cardData.map((item, index) => {
          const preSelected = item?.title?.includes('Default');
          const Icon = item?.source;
          return (
            <Card preSelected={preSelected} key={index}>
              {preSelected ? (
                <Default />
              ) : (
                <TouchableOpacity
                  testID="checkBox"
                  onPress={() => changeCardData(index)}>
                  <BlueCheckBox checked={item?.checked} />
                </TouchableOpacity>
              )}
              <IconWrapper>
                <Icon />
              </IconWrapper>

              <Title preSelected={preSelected}>{item?.title}</Title>
            </Card>
          );
        })}
      </ScrollView>
      <StyledIconWrapper>
        <Digilocker />
      </StyledIconWrapper>

      <Button
        title={'Add ' + '(' + selectedData.length + ')'}
        onPress={() => navigation.navigate({name: DIGI_LOCKER.SCREEN})}
        testID="AddBtn"
      />
      {showCheckingModal && (
        <CheckingModal
          description="Checking your issued documents in Digilocker"
          title="Checking..."
          visible={showCheckingModal}
        />
      )}
    </Container>
  );
};

export default AddCredentials;