spa_instat_tv/src/features/UserAccount/components/PageSubscriptions/index.tsx

import map from 'lodash/map'

import { SportTypes } from 'config'

import type { MatchSubscriptions } from 'requests'
import { SubscriptionType } from 'requests'

import { useToggle } from 'hooks'

import { SubscriptionModal } from '../SubscriptionsModal'
import { UserSubscriptionsList } from '../UserSubscriptionsList'
import { Wrapper, SubscriptionsWrapper } from './styled'
import { SolidButton, Icon } from '../../styled'

const data: Record<SportTypes, MatchSubscriptions> = {
  [SportTypes.FOOTBALL]: [
    {
      description: 'Доступ к прямой трансляции, записи и хайлайты матча',
      header: 'подписка на матч спартак-динамо',
      price: 999,
      subscription_id: 1,
      type: SubscriptionType.Month,
    },
    {
      description: 'все матчи спартака в сезоне 2020-2021',
      header: 'подписка на матч спартак-динамо',
      price: 999,
      subscription_id: 2,
      type: SubscriptionType.Month,
    },
    {
      description: 'Доступ к прямой трансляции, записи и хайлайты матча',
      header: 'подписка на матч спартак-динамо',
      price: 999,
      subscription_id: 3,
      type: SubscriptionType.Month,
    },
  ],
  [SportTypes.BASKETBALL]: [],
  [SportTypes.HOCKEY]: [
    {
      description: 'все матчи спартака в сезоне 2020-2021',
      header: 'подписка на матч спартак-динамо',
      price: 999,
      subscription_id: 4,
      type: SubscriptionType.Month,
    },
    {
      description: 'Доступ к прямой трансляции, записи и хайлайты матча',
      header: 'подписка на матч спартак-динамо',
      price: 999,
      subscription_id: 5,
      type: SubscriptionType.Month,
    },
    {
      description: 'Доступ к прямой трансляции, записи и хайлайты матча',
      header: 'подписка на матч спартак-динамо',
      price: 999,
      subscription_id: 6,
      type: SubscriptionType.Month,
    },
  ],
}

export const PageSubscriptions = () => {
  const {
    close,
    isOpen,
    open,
  } = useToggle()

  return (
    <Wrapper>
      <SubscriptionsWrapper>
        {
          map(data, (subscriptions, sport: SportTypes) => (
            <UserSubscriptionsList
              key={sport}
              list={subscriptions}
              sport={sport}
            />
          ))
        }
      </SubscriptionsWrapper>

      <SolidButton onClick={open}>
        <Icon src='plusIcon' />
        Выбрать подписку
      </SolidButton>

      <SubscriptionModal
        close={close}
        isOpen={isOpen}
      />
    </Wrapper>
  )
}