import React from 'react';
import { Undefinable } from 'tsdef';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { SRowTitleWrapper } from '../../s-components/s-row-title-wrapper';
import { TEntityMarket, TMarketSourcePage, TSetActive } from '../../types';
import { TOP_MARKETS_AS_STRING } from '../../constants';
import { Row } from '../row';
import { TMarket } from '../../../common/types';

type TProps = {
  marketVariant: TMarketSourcePage;
  selectMarketColor: string;
  active: Undefinable<string>;
  setActive: TSetActive;
  markets: TEntityMarket;
};

export const MarketsTrackPlaylists: React.FC<TProps> = ({
  marketVariant,
  selectMarketColor,
  active,
  setActive,
  markets,
}) => {
  return (
    <>
      <SRowTitleWrapper variant={marketVariant}>
        <SH6 color={selectMarketColor}>Select market</SH6>
      </SRowTitleWrapper>
      <Row
        marketVariant={marketVariant}
        index={-2}
        selected={active!}
        market={{
          code: TOP_MARKETS_AS_STRING,
          short_name: 'Top 6 Markets',
          id: -2,
          name: TOP_MARKETS_AS_STRING,
        }}
        onPress={setActive}
      />
      {markets && markets.data
        ? markets.data.map((market: TMarket, index: number) => {
            if (market.code === '_gl') {
              return null;
            }

            return (
              <Row
                marketVariant={marketVariant}
                index={index}
                key={market.id}
                selected={active!}
                market={market}
                onPress={setActive}
              />
            );
          })
        : null}
    </>
  );
};