import map from 'lodash/map'

import { SportTypes } from 'config'

import { SubscriptionType } from 'features/BuyMatchPopup/types'
import { T9n } from 'features/T9n'

import { UserSubscriptionsList } from '../UserSubscriptionsList'
import {
  Wrapper,
  SubscriptionsWrapper,
  Tabs,
  Tab,
} from './styled'

type MatchSubscription = {
  description: string,
  header: string,
  isActive?: boolean,
  price: number,
  subscription_id: number,
  type: SubscriptionType,
}

export type MatchSubscriptions = Array<MatchSubscription>

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

export const PageSubscriptions = () => (
  <Wrapper>
    <Tabs>
      <Tab active>
        <T9n t='subscriptions_active' />
      </Tab>
      <Tab>
        <T9n t='subscriptions_removed' />
      </Tab>
    </Tabs>
    <SubscriptionsWrapper>
      {
        map(data, (subscriptions, sport: SportTypes) => (
          <UserSubscriptionsList
            key={sport}
            list={subscriptions}
            sport={sport}
          />
        ))
      }
    </SubscriptionsWrapper>
  </Wrapper>
)
