import { Fragment } from 'react'
import { useRouteMatch } from 'react-router-dom'

import { PAGES } from 'config'

import { T9n } from 'features/T9n'
import { ButtonSolid } from 'features/Common/Button'
import { ArrowLeft, ArrowRight } from 'features/Common/Arrows'
import { MainSubscription } from 'features/Register/components/MainSubscription'
import { AdditionalSubscription } from 'features/Register/components/AdditionalSubscription'

import {
  SubscriptionsBlock,
  AdditionalBlockTitle,
  BlockTitle,
  SubscriptionList,
  SubscriptionListItem,
  PricesBlock,
  TotalInfoBlock,
  TotalInfoText,
  TotalPriceAmmount,
  TotalPriceDetails,
  ButtonsBlock,
} from './styled'

export const SubscriptionStep = () => {
  const isSubsStep = useRouteMatch(`${PAGES.register}/subscriptions`)?.isExact || false
  return (
    <Fragment>
      <SubscriptionsBlock isSubsStep={isSubsStep}>
        <BlockTitle>
          <T9n t='step_title_subscription' />
        </BlockTitle>
        <SubscriptionList>
          <SubscriptionListItem>
            <MainSubscription title='Бесплатная' price={0} />
          </SubscriptionListItem>
          <SubscriptionListItem>
            <MainSubscription title='Базовая' price={1999} />
          </SubscriptionListItem>
        </SubscriptionList>
      </SubscriptionsBlock>
      <SubscriptionsBlock forAdditionalTitle>
        <AdditionalBlockTitle>
          <T9n t='subscription_extra' />
        </AdditionalBlockTitle>
        <PricesBlock>
          <ArrowLeft />
          <AdditionalSubscription title='Российская премьер-лига' price={1999} />
          <AdditionalSubscription title='Primera División' price={1999} />
          <AdditionalSubscription title='Manchester United' price={999} />
          <AdditionalSubscription title='Василий Березуцкий' price={299} />
          <ArrowRight />
        </PricesBlock>
      </SubscriptionsBlock>
      <ButtonsBlock>
        <TotalInfoBlock>
          <TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
            <TotalPriceAmmount>6997</TotalPriceAmmount>
            <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
          </TotalInfoText>
        </TotalInfoBlock>
        <ButtonSolid>
          <T9n t='subscription_done' />
        </ButtonSolid>
      </ButtonsBlock>
    </Fragment>
  )
}