import isNumber from 'lodash/isNumber'
import map from 'lodash/map'

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

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

type Props = {
  onSelect: (subscription: MatchPackage) => void,
  packages: Array<MatchPackage>,
  selectedPackage: MatchPackage | null,
}

export const PackagesList = ({
  onSelect,
  packages,
  selectedPackage,
}: Props) => (
  <List>
    {
      map(
        packages,
        (subPackage) => (
          <Item
            key={subPackage.id}
            onClick={() => onSelect(subPackage)}
            active={subPackage === selectedPackage}
          >
            <InfoWrapper>
              <Pass>
                <T9n t={subPackage.pass} />
              </Pass>
              <Name>
                {
                  isNumber(subPackage.nameLexic)
                    ? <T9n t={subPackage.nameLexic} />
                    : subPackage.name
                }
              </Name>
              <Description>
                <T9n
                  t={subPackage.description.lexic}
                  values={subPackage.description.values}
                />
              </Description>
            </InfoWrapper>
            <ScPriceContainer>
              <Price
                amount={subPackage.price}
                currency={subPackage.currency}
                perPeriod={
                  subPackage.type !== SubscriptionType.Month
                    ? null
                    : `per_${subPackage.type}`
                }
              />
              {
                subPackage.type === SubscriptionType.Month
                          && (
                            <ScAutoRenewal>
                              <T9n
                                t='auto_renewal'
                              />
                            </ScAutoRenewal>
                          )
              }
            </ScPriceContainer>
          </Item>
        ),
      )
    }
  </List>
)
