import { useState } from 'react'

import { Link } from 'react-router-dom'

import { PAGES } from 'config'

import { saveUserInfo } from 'requests'

import { T9n } from 'features/T9n'
import { useAuthStore } from 'features/AuthStore'

import { getCurrentYear } from 'helpers'

import {
  Body,
  ButtonsBlock,
  ContentWrapper,
  Email,
  Footer,
  FooterLogo,
  FooterRights,
  HeaderWrapper,
  MainLogo,
  OutlineButton,
  ScLink,
  SolidButton,
  Text,
  Title,
  Wrapper,
} from './styled'

const Mailings = () => {
  const { fetchUserInfo, userInfo } = useAuthStore()
  const [isReSubscribed, setIsReSubscribed] = useState(false)

  if (!userInfo) return null

  const currentYear = getCurrentYear()

  const onUnsubscribe = async (isUnsubscribed: boolean) => {
    if (!isUnsubscribed) {
      setIsReSubscribed(true)
    }

    try {
      await saveUserInfo({
        ...userInfo,
        countryId: userInfo.country?.id!,
        isUnsubscribed,
        language_id: userInfo.language?.id,
        postalCode: userInfo.postal_code,
      })
      await fetchUserInfo()

    // eslint-disable-next-line no-empty
    } catch (error) {}
  }

  const getContent = () => {
    switch (true) {
      case userInfo.is_unsubscribed:
        return (
          <ContentWrapper>
            <Title>
              <T9n t='you_are_now_unsubscribed' />
            </Title>
            <br />
            <Text>
              <T9n t='you_have_been_removed_from_the_inSports_newsletter' />
            </Text>
            <ButtonsBlock>
              <SolidButton onClick={() => onUnsubscribe(false)}>
                <T9n t='resubscribe' />
              </SolidButton>
              <ScLink to={PAGES.home}>
                <OutlineButton>
                  <T9n t='go_to_the_main_page' />
                </OutlineButton>
              </ScLink>
            </ButtonsBlock>
          </ContentWrapper>
        )
      case isReSubscribed:
        return (
          <ContentWrapper>
            <Title><T9n t='resubscription_successful' /></Title>
            <br />
            <Text>
              <T9n t='you_have_been_resubscribed_to_inSports_newsletter' />
            </Text>
            <ButtonsBlock>
              <ScLink to={PAGES.home}>
                <SolidButton>
                  <T9n t='go_to_the_main_page' />
                </SolidButton>
              </ScLink>
            </ButtonsBlock>
          </ContentWrapper>
        )
      default:
        return (
          <ContentWrapper>
            <Title><T9n t='unsubscribe' /></Title>
            <br />
            <Text>
              <T9n t='click_unsubscribe_to_stop_receiving_inSports_emails_to' />
              <Email>{' '}{userInfo?.email}</Email>
            </Text>
            <ButtonsBlock>
              <ScLink to={PAGES.home}>
                <SolidButton>
                  <T9n t='cancel' />
                </SolidButton>
              </ScLink>
              <OutlineButton onClick={() => onUnsubscribe(true)}>
                <T9n t='unsubscribe' />
              </OutlineButton>
            </ButtonsBlock>
          </ContentWrapper>
        )
    }
  }

  return (
    <Wrapper>
      <HeaderWrapper>
        <Link to={PAGES.home}>
          <MainLogo />
        </Link>
      </HeaderWrapper>
      <Body>
        {getContent()}
      </Body>
      <Footer>
        <FooterLogo />
        <FooterRights>©inSports.tv {currentYear}</FooterRights>
      </Footer>
    </Wrapper>
  )
}

export default Mailings
