import React from 'react';
import { fp as _ } from '../../common/utils/fp';
import { SFilterInfo } from '../../charts/s-components/s-filter-info';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { theme } from '../../app/theme';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { withMarkets } from '../../common/hoc/with-markets';
import { TMarketsAssoc } from '../../common/types';
import { Flag } from '../../common/components/flag';
import {
  TOP_MARKETS,
  TOP_MARKETS_AS_STRING,
} from '../../market-selector/constants';
import { SCombineMarketName } from '../s-components/s-combine-market-name';

type TProps = {
  marketCode: string;
  marketsAssoc: TMarketsAssoc;
};

export const PlaylistMarketInfoComponent: React.FC<TProps> = props => {
  const { marketCode, marketsAssoc } = props;
  const marketName = _.path([marketCode, 'short_name'], marketsAssoc);
  const isAllMarkets = _.isNil(marketCode);
  const isTop6Markets = TOP_MARKETS.join(',') === marketCode;
  const combineMarketName = isAllMarkets
    ? 'All'
    : isTop6Markets
    ? `Top 6 (${TOP_MARKETS_AS_STRING.toUpperCase()})`
    : marketName;
  const showFlag = _.isString(marketCode) && !isAllMarkets && !isTop6Markets;

  return (
    <SFilterInfo>
      <SH6 color={theme.colors.romanPurple}>Owner Market</SH6>
      <SBox>
        <SRow ml={11} alignItems="center" mt={-6} mb={1}>
          {showFlag && (
            <Flag market={marketCode} width={16} height={16} marginTop={0} />
          )}
          <SCombineMarketName color="black" ml={11} capitalize={isAllMarkets}>
            {combineMarketName}
          </SCombineMarketName>
        </SRow>
      </SBox>
    </SFilterInfo>
  );
};

export const PlaylistMarketInfo = _.compose(withMarkets)(
  PlaylistMarketInfoComponent
);