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

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

export const MarketInfoComponent: React.FC<TProps> = props => {
  const { marketCode, marketsAssoc } = props;
  const marketName = _.path([marketCode, 'short_name'], marketsAssoc);

  return (
    <SFilterInfo mb={10}>
      <SH6 color={theme.colors.romanPurple}>Market</SH6>
      <SBox>
        <SRow ml={11} alignItems="center" mt={-6} mb={1}>
          <Flag market={marketCode} width={15.3} height={15.3} marginTop={0} />
          <SMarketInfoName color="black" ml={13}>
            {marketName}
          </SMarketInfoName>
        </SRow>
      </SBox>
    </SFilterInfo>
  );
};

export const MarketInfo = _.compose(withMarkets)(MarketInfoComponent);