import React, {FC, useState} from 'react';
import {Modal, Image} from 'react-native';
import useUser from '@contexts/user';
import ShareIcon from '@assets/svg/ShareIcon';
import InfoIcon from '@assets/svg/InfoIcon';
import SuccessIcon from '@assets/svg/SuccessSmall';
import ErrorIcon from '@assets/svg/ErrorSmall';
import {
  Overlay,
  Wrapper,
  Footer,
  FooterButton,
  FooterButtonLabelStyle,
  Title,
  SubTitle,
  Body,
  SharedSuccessfully,
  SharedSuccessfullyTitle,
  SharedSuccessfullySubTitle,
  SharedSuccessfullySubTitleWrapper,
  SharedUnSuccessfullyTitle,
  CredentialWrapper,
  CredentialName,
  CredentialStatusWrapper,
  CredentialStatus,
} from '@styles/components/credential-request';

enum MODAL_DISPLAY_STATE {
  REQUEST = 1,
  SHARED = 2,
  SHARED_ERROR = 3,
}

const CredentialRequestModal: FC = () => {
  const {setCredentialRequests, credentialRequests, credentials} = useUser();
  const [displayState, setDisplayState] = useState(MODAL_DISPLAY_STATE.REQUEST);
  const hide = () => setCredentialRequests(undefined);

  const credentialRequestsData =
    credentialRequests?.credentialRequirements?.map((c: any) => ({
      ...c,
      availableInWallet: !!credentials?.find(d => d?.type[0] === c?.type[0]),
    }));
  const visible = credentialRequestsData?.length > 0;

  const shareableVCCount = credentialRequestsData?.filter(
    (c: any) => c?.availableInWallet,
  )?.length;

  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={visible}
      onRequestClose={hide}>
      <Overlay
        onPress={() => {
          setCredentialRequests(undefined);
          hide();
        }}
        activeOpacity={1}
      />

      <Wrapper edges={['bottom']} testID="notifPop">
        {displayState === MODAL_DISPLAY_STATE.REQUEST && (
          <Title>Credential request</Title>
        )}

        {displayState === MODAL_DISPLAY_STATE.REQUEST && (
          <SubTitle>
            Learnet is requesting below credentials for placement registration
            verification
          </SubTitle>
        )}
        <Body>
          {(displayState === MODAL_DISPLAY_STATE.SHARED ||
            displayState === MODAL_DISPLAY_STATE.SHARED_ERROR) && (
            <SharedSuccessfully>
              <ShareIcon />
              <SharedSuccessfullyTitle>
                Shared successfully
              </SharedSuccessfullyTitle>

              <SharedSuccessfullySubTitle>
                Aadhaar card
              </SharedSuccessfullySubTitle>

              <SharedSuccessfullySubTitleWrapper>
                <SharedSuccessfullySubTitle>
                  successfully with
                </SharedSuccessfullySubTitle>
                <Image
                  source={require('@assets/images/credential/learnet-logo.png')}
                />
              </SharedSuccessfullySubTitleWrapper>

              {displayState === MODAL_DISPLAY_STATE.SHARED_ERROR && (
                <>
                  <InfoIcon />
                  <SharedUnSuccessfullyTitle>
                    Please contact Learnet to submit the following documents:
                  </SharedUnSuccessfullyTitle>
                </>
              )}
            </SharedSuccessfully>
          )}

          {(displayState === MODAL_DISPLAY_STATE.REQUEST ||
            displayState === MODAL_DISPLAY_STATE.SHARED_ERROR) &&
            credentialRequestsData?.length > 0 &&
            credentialRequestsData?.map((c: any, index: number) => (
              <CredentialWrapper
                key={`${c?.type[0]}_${index}`}
                error={!c?.availableInWallet}>
                {c?.availableInWallet ? <SuccessIcon /> : <ErrorIcon />}
                <CredentialName>{c?.type[0]}</CredentialName>
                <CredentialStatusWrapper>
                  <CredentialStatus>In wallet</CredentialStatus>
                </CredentialStatusWrapper>
              </CredentialWrapper>
            ))}
        </Body>
        <Footer
          isFlexDirectionRow={displayState !== MODAL_DISPLAY_STATE.REQUEST}>
          {displayState !== MODAL_DISPLAY_STATE.SHARED && (
            <FooterButton
              title={
                displayState === MODAL_DISPLAY_STATE.REQUEST
                  ? credentialRequests?.share
                    ? `Share (${shareableVCCount})`
                    : `Add to Asli and share (${shareableVCCount})`
                  : 'Okay'
              }
              disabled={
                MODAL_DISPLAY_STATE.REQUEST
                  ? credentialRequestsData?.find(
                      (c: any) => c?.availableInWallet,
                    )
                    ? false
                    : true
                  : false
              }
              labelStyles={FooterButtonLabelStyle}
              testID="add2Wlt"
              onPress={() => {
                if (displayState === MODAL_DISPLAY_STATE.REQUEST) {
                  setDisplayState(MODAL_DISPLAY_STATE.SHARED);
                  setTimeout(
                    () => setDisplayState(MODAL_DISPLAY_STATE.SHARED_ERROR),
                    1000,
                  );
                } else {
                  setCredentialRequests(undefined);
                }
              }}
            />
          )}

          {displayState === MODAL_DISPLAY_STATE.REQUEST && (
            <FooterButton
              title={credentialRequests?.share ? 'Cancel' : 'Skip & share'}
              variant="text"
              onPress={() => setCredentialRequests(undefined)}
              labelStyles={FooterButtonLabelStyle}
            />
          )}
        </Footer>
      </Wrapper>
    </Modal>
  );
};

export default CredentialRequestModal;
