import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'

import { isMobileDevice } from 'config/userAgent'
import { PAGES } from 'config'
import { client } from 'config/clients'

import { isBoolean } from 'lodash'

import { useRecoilValue, useRecoilState } from 'recoil'

import { T9n } from 'features/T9n'
import { CompanyInfo } from 'features/CompanyInfo'
import { ChangeCardPopup } from 'features/UserAccount/components/ChangeCardPopup'

import { PriceInfo } from './components/PriceInfo'
import { FormHighlights } from './components/FormHighlights'
import { MatchesHighlights } from './components/MatchesHighlights'
import { ThanksPopup } from './components/ThanksPopup'
import { VideoHighlight } from './components/VideoHighlight'

import {
  checkedMatches,
  dataForPayHighlights,
  openPopupChangeCard,
} from './storeHighlightsAtoms'

import {
  ScHeader,
  ScHeaderLogo,
  ScWrapper,
  ScWrapperContent,
  ScButton,
  ScButtonWrap,
  ScPrice,
} from './styled'

const HighlightsPage = () => {
  const { checkedMatchesLength } = useRecoilValue(checkedMatches)
  const [startHeight] = useState(window.innerHeight)
  const [showBtn, setShowBtn] = useState(true)
  const [isOpenPopupChangeCard, setIsOpenPopupChangeCard] = useRecoilState(openPopupChangeCard)
  const [isOpenPopupVideo, setIsOpenPopupVideo] = useState(false)
  const { data } = useRecoilValue(dataForPayHighlights)

  const isNotEmpty = !data?.duration
  || !data?.player_id
  || !data?.sport_id
  || !data?.matches.length
  || !isBoolean(data?.stats)
  || data?.matches.length > 10
  || data.background_music === undefined
  || !checkedMatchesLength

  const price = checkedMatchesLength * 25

  useEffect(() => {
    window.addEventListener('resize', (e) => {
      setShowBtn(startHeight === window.innerHeight)
    })

    return () => {
      window.removeEventListener('resize', () => setShowBtn(true))
    }
  // eslint-disable-next-line
  }, [])

  return (
    <ScWrapper>
      <ScHeader>
        <Link to={PAGES.home}>
          <ScHeaderLogo />
        </Link>
      </ScHeader>
      <ScWrapperContent>
        {isMobileDevice ? null : (
          <PriceInfo price={price} setIsOpenPopupVideo={setIsOpenPopupVideo} />
        )}
        <FormHighlights price={price} setIsOpenPopupVideo={setIsOpenPopupVideo} />
        <MatchesHighlights />
      </ScWrapperContent>
      {
        showBtn && (
          <ScButtonWrap
            disabled={isNotEmpty}
            onClick={() => !isNotEmpty && setIsOpenPopupChangeCard(true)}
          >
            <ScButton>
              <T9n t='order_and_buy' />
              <ScPrice>
                &nbsp;${price}
              </ScPrice>
            </ScButton>
          </ScButtonWrap>
        )
      }
      <CompanyInfo clientName={client.name} textAlign='center' />
      <ChangeCardPopup
        btnName='buy_subscription'
        changeCardPopupOpen={isOpenPopupChangeCard}
        setChangeCardPopupOpen={setIsOpenPopupChangeCard}
        title='payment'
      />
      <ThanksPopup />
      <VideoHighlight
        isOpenPopupVideo={isOpenPopupVideo}
        setIsOpenPopupVideo={setIsOpenPopupVideo}
      />
    </ScWrapper>
  )
}

export default HighlightsPage