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 { TSetActive } from '../../types';
import { TMarket } from '../../../common/types';
import { Row } from '../row';
import { useAppSelector } from '../../../app/core/redux';
import { makeSortedPlaylistMarketGroupsSelector } from '../../selectors';
import { fp as _ } from '../../../common/utils/fp';
import { SBox } from '../../../common/s-components/layout/s-box';
import { MARKET_VARIANT_PARAMS } from '../../constants';

type TProps = {
  selectMarketColor: string;
  active: Undefinable<string>;
  setActive: TSetActive;
};

export const MarketsPlaylist: React.FC<TProps> = ({
  selectMarketColor,
  active,
  setActive,
}) => {
  const { data } = useAppSelector(makeSortedPlaylistMarketGroupsSelector());
  let topMarkets;
  let otherMarkets;
  const marketVariant = MARKET_VARIANT_PARAMS.playlist;

  if (data) {
    topMarkets = _.path('top', data);
    otherMarkets = _.path('other', data);
  }

  return (
    <>
      {_.length(_.path('top', data)) ? (
        <SBox pb={32}>
          <SRowTitleWrapper variant={marketVariant}>
            <SH6 color={selectMarketColor}>Top markets</SH6>
          </SRowTitleWrapper>
          {topMarkets.map((market: TMarket, index: number) => {
            return (
              <Row
                marketVariant={marketVariant}
                index={index}
                key={market.id}
                selected={active!}
                market={market}
                onPress={setActive}
              />
            );
          })}
        </SBox>
      ) : null}

      {_.length(_.path('other', data)) ? (
        <>
          <SRowTitleWrapper variant={marketVariant}>
            <SH6 color={selectMarketColor}>Other markets</SH6>
          </SRowTitleWrapper>
          {otherMarkets.map((market: TMarket, index: number) => {
            return (
              <Row
                marketVariant={marketVariant}
                index={index}
                key={market.id}
                selected={active!}
                market={market}
                onPress={setActive}
              />
            );
          })}
        </>
      ) : null}
    </>
  );
};