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 { Row } from '../row';
import { TMarket } from '../../../common/types';
import { MARKET_VARIANT_PARAMS } from '../../constants';

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

export const MarketTrackPlaylistsSpotify: React.FC<TProps> = ({
  marketVariant,
  selectMarketColor,
  active,
  setActive,
  markets,
}) => {
  return (
    <>
      <SRowTitleWrapper variant={marketVariant}>
        <SH6 color={selectMarketColor}>Select market</SH6>
      </SRowTitleWrapper>
      {marketVariant !== MARKET_VARIANT_PARAMS.trackPlaylistSpotifyStreams && (
        <Row
          marketVariant={marketVariant}
          index={-1}
          selected={active!}
          market={{
            code: 'all',
            short_name: 'All',
            id: -1,
            name: 'all',
          }}
          onPress={setActive}
        />
      )}
      {markets && markets.data
        ? markets.data.map((market: TMarket, index: number) => {
            return (
              <Row
                marketVariant={marketVariant}
                index={index}
                key={market.id}
                selected={active!}
                market={market}
                onPress={setActive}
              />
            );
          })
        : null}
    </>
  );
};