import map from 'lodash/map'

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

import {
  Pass,
  Name,
  Description,
  InfoWrapper,
  Item,
  List,
  Price,
} from './styled'

type Props = {
  onSelect: (subscription: MatchSubscription) => void,
  selectedSubscription: MatchSubscription | null,
  subscriptions: Array<MatchSubscription>,
}

export const SubscriptionsList = ({
  onSelect,
  selectedSubscription,
  subscriptions,
}: Props) => (
  <List>
    {
      map(
        subscriptions,
        (subscription) => {
          const { description, type } = subscription

          return (
            <Item
              key={subscription.id}
              onClick={() => onSelect?.(subscription)}
              active={subscription === selectedSubscription}
            >
              <InfoWrapper>
                <Pass>
                  <T9n t={subscription.pass} />
                </Pass>
                <Name>
                  {subscription.name}
                </Name>
                <Description>
                  <T9n t={description.lexic} values={description.values} />
                </Description>
              </InfoWrapper>
              <Price
                amount={subscription.price}
                currency={subscription.currency}
                perPeriod={type !== SubscriptionType.Month ? null : `per_${type}`}
              />
            </Item>
          )
        },
      )
    }
  </List>
)
