import { useState } from 'react'

import styled from 'styled-components/macro'

import map from 'lodash/map'
import isNull from 'lodash/isNull'

import { MDASH } from 'config'
import { SelectSubscriptionData } from 'requests'

import { Name as Names } from 'features/Name'
import { T9n } from 'features/T9n'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
import { CloseButton, HeaderActions } from 'features/PopupComponents'
import { ArrowLoader } from 'features/ArrowLoader'

import {
  Body,
  Button,
  Footer,
  Header,
  HeaderTitle,
  Wrapper,
} from 'features/BuyMatchPopup/styled'
import {
  Description,
  InfoWrapper,
  Item,
  List,
  Name,
  Pass,
} from '../SubscriptionsList/styled'

import { Price } from './styled'

export const ChooseSub = styled.div`
  font-weight: 600;
  font-size: 16px;
  margin: 35px 0 17px;
`

export const ChooseSubItem = styled(Item)`
  min-height: auto;
`

export const ChooseSubList = styled(List)`
  height: auto;
`

export const SelectSubscriptionStep = () => {
  const [active, setActive] = useState<number | null>(null)

  const {
    close,
    initialSubscription,
    loader,
    match,
    onChooseSub,
    onSubscriptionPackagesSelect,
    selectedSubscriptionPackage,
    setSelectSubName,
  } = useBuyMatchPopupStore()

  if (!match || !initialSubscription) return null

  const onItemClick = (subscription: SelectSubscriptionData, index: number) => {
    onSubscriptionPackagesSelect({
      ...subscription.packages,
      season: initialSubscription.season,
    })
    index === active ? setActive(null) : setActive(index)
    setSelectSubName(subscription.lexic)
  }

  return (
    <Wrapper>
      <Header>
        <HeaderTitle>
          <Names nameObj={match.team1} />
          {` ${MDASH} `}
          <Names nameObj={match.team2} />
          <ChooseSub>
            <T9n t='choose_subscription' />
          </ChooseSub>
        </HeaderTitle>
        <HeaderActions position='right'>
          <CloseButton onClick={close} />
        </HeaderActions>
      </Header>
      <Body marginTop={15}>
        <ChooseSubList>
          {map(initialSubscription.data, (subscription, index) => (
            <ChooseSubItem
              key={subscription.id}
              onClick={() => onItemClick(subscription, index)}
              active={active === index}
            >
              <InfoWrapper>
                <Pass>
                  <T9n t={subscription.lexic} />
                </Pass>
                <Name>
                  <T9n t={subscription.lexic2} />
                </Name>
                <Description>
                  <T9n t={subscription.lexic3} />
                </Description>
              </InfoWrapper>

              <Price
                amount={subscription.min_price || 0}
                currency={subscription.packages.month.all.currency_iso}
                isFrom={Boolean(subscription.min_price)}
              />
            </ChooseSubItem>
          ))}
        </ChooseSubList>
      </Body>
      <Footer>
        {loader
          ? <ArrowLoader width='204px' disabled />
          : (
            <Button
              disabled={!selectedSubscriptionPackage || isNull(active)}
              onClick={onChooseSub}
            >
              <T9n t='next_choose' />
            </Button>
          )}
      </Footer>
    </Wrapper>
  )
}
