import React from 'react';
import { SRow } from '../s-components/layout/s-row';
import { SBox } from '../s-components/layout/s-box';
import { SH6 } from '../s-components/typography/s-h6';
import { getFlagSource } from '../transducers';
import { SImage } from '../s-components/s-image';
import { fp as _ } from '../utils/fp';
import { SFlagWrapper } from '../s-components/s-flag-wrapper';
import { SCircle } from '../s-components/s-circle';

type TProps = {
  markets: string[];
};

const FLAG_SIZE = 22;
const FLAG_OFFSET = 12;
const FLAG_DOUBLE_OFFSET = 25;

export const MarketsTagged: React.FC<TProps> = props => {
  const { markets } = props;
  const marketsLength = _.length(markets);
  const otherMarketsLength = marketsLength - 2;
  const boxWidth = marketsLength === 1 ? 22 : marketsLength === 2 ? 35 : 51;

  return (
    <SRow alignItems="center" width={boxWidth} overflow="hidden">
      {/* eslint-disable-next-line array-callback-return */}
      {markets.map((market, index) => {
        const sourceFlag = getFlagSource(market!, 'small', 'light');
        if (index === 0) {
          return (
            <SBox key={market}>
              <SImage
                source={sourceFlag}
                width={FLAG_SIZE}
                height={FLAG_SIZE}
              />
            </SBox>
          );
        }
        if (index === 1) {
          return (
            <SFlagWrapper key={market} left={-FLAG_OFFSET}>
              <SImage
                source={sourceFlag}
                width={FLAG_SIZE}
                height={FLAG_SIZE}
              />
            </SFlagWrapper>
          );
        }
        if (index === 2) {
          return (
            <SFlagWrapper key={market} left={-FLAG_DOUBLE_OFFSET}>
              {marketsLength === 3 ? (
                <SImage
                  source={sourceFlag}
                  width={FLAG_SIZE}
                  height={FLAG_SIZE}
                />
              ) : null}
              {marketsLength > 3 ? (
                <SCircle>
                  <SH6>{`+${otherMarketsLength}`}</SH6>
                </SCircle>
              ) : null}
            </SFlagWrapper>
          );
        }
      })}
    </SRow>
  );
};