import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'

import { SportTypes } from 'config'

import type { MatchSubscriptions } from '../PageSubscriptions'
import { InlineButton } from '../../styled'
import {
  Wrapper,
  SportName,
  List,
  Item,
  Subscription,
  InfoWrapper,
  Header,
  Description,
  Price,
  SubscriptionEnd,
} from './styled'

type Props = {
  list: MatchSubscriptions,
  sport: SportTypes,
}

export const UserSubscriptionsList = ({ list, sport }: Props) => {
  if (isEmpty(list)) return null
  return (
    <Wrapper>
      <SportName sport={sport} />
      <List>
        {
          map(list, ({
            description,
            header,
            isActive,
            price,
            subscription_id,
            type,
          }) => (
            <Item key={subscription_id}>
              <Subscription>
                <InfoWrapper>
                  <Header>
                    {header}
                  </Header>
                  <Description>
                    {description}
                  </Description>
                </InfoWrapper>

                <Price amount={price} perPeriod={`per_${type}`} />
                <InlineButton color={isActive ? '#eb5757' : '#294FC3'}>
                  {isActive ? 'Удалить' : 'Восстановить'}
                </InlineButton>
              </Subscription>
              <SubscriptionEnd>Следующее списание 31.02.2020</SubscriptionEnd>
            </Item>
          ))
        }
      </List>
    </Wrapper>
  )
}
