import { ArrowLoader } from 'features/ArrowLoader'
import { T9n } from 'features/T9n'

import type { Subscribe } from 'requests/getUserSubscribes'

import { format } from 'date-fns'

import {
  Modal,
  Wrapper,
  Header,
  HeaderTitle,
  Body,
  Footer,
  ScSaveSubBtn,
  Text,
  ScCancelSub,
  ScStillCancelBtn,
  ScNotificationPopup,
  ScOkBtn,
} from './styled'

type Props = {
  cancelSub: () => void,
  error: string,
  handleModalClose: () => void,
  isFetching: boolean,
  isModalOpen: boolean,
  isSubCanceled: boolean,
  subscribe: Subscribe,
}

export const CancelSubPopup = (props: Props) => {
  const {
    cancelSub,
    error,
    handleModalClose,
    isFetching,
    isModalOpen,
    isSubCanceled,
    subscribe,
  } = props

  const {
    access_to,
    is_gpay,
    lexic,
    option_sys_name,
  } = subscribe

  return (
    <Modal isOpen={isModalOpen} withCloseButton={is_gpay}>
      <Wrapper>
        {isSubCanceled || error ? (
          <ScNotificationPopup>
            <Text>
              <T9n t={error || 'sub_not_renewed'} />
            </Text>
            <ScOkBtn onClick={() => handleModalClose()}>Ok</ScOkBtn>
          </ScNotificationPopup>
        ) : (
          <>
            <Header>
              <HeaderTitle>
                <T9n t='unsubscribe' />
              </HeaderTitle>
            </Header>
            <Body>
              {is_gpay ? (
                <Text>
                  <T9n t='is_gpay' />
                </Text>
              ) : (
                <>
                  <Text>
                    <T9n t='if_you_cancel' />
                  </Text>
                  <ScCancelSub>
                    {option_sys_name && `${option_sys_name[0].toUpperCase()}${option_sys_name.slice(1, option_sys_name.length)}`} — <T9n t={lexic} />
                  </ScCancelSub>
                  <Text>
                    <T9n t='after_canceling' />
                &nbsp;
                    <b>{access_to && format(new Date(access_to), 'dd.MM.yyyy')}</b>
                  </Text>
                  <Footer>
                    <ScStillCancelBtn
                      onClick={() => cancelSub()}
                      isFetching={isFetching}
                    >
                      {isFetching ? (
                        <ArrowLoader />
                      ) : (
                        <T9n t='still_cancel' />
                      )}
                    </ScStillCancelBtn>
                    <ScSaveSubBtn onClick={() => handleModalClose()}>
                      <T9n t='save_sub' />
                    </ScSaveSubBtn>
                  </Footer>
                </>
              )}
            </Body>
          </>
        )}
      </Wrapper>
    </Modal>
  )
}
