import styled, { css } from 'styled-components/macro'

import { SubscriptionType } from 'requests'

import { T9n } from 'features/T9n'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'

const List = styled.ul`
  display: flex;
  padding: 0 35px;
  margin-top: 9px;
`

type ItemProps = {
  active?: boolean,
}

const Item = styled.li.attrs(() => ({
  tabIndex: 0,
}))<ItemProps>`
  width: 50%;
  font-size: 20px;
  line-height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;

  ${({ active }) => (
    active
      ? css`
        border-bottom: 3px solid #fff;
        color: #fff;
      `
      : ''
  )}
`

export const PaymentPeriods = () => {
  const { onPeriodSelect, selectedPeriod } = useBuyMatchPopupStore()
  return (
    <List>
      <Item
        active={selectedPeriod === SubscriptionType.Month}
        onClick={() => onPeriodSelect(SubscriptionType.Month)}
      >
        <T9n t='for_month' />
      </Item>
      <Item
        active={selectedPeriod === SubscriptionType.Year}
        onClick={() => onPeriodSelect(SubscriptionType.Year)}
      >
        <T9n t='for_year' />
      </Item>
    </List>
  )
}