import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { TDataApi } from '../types';
import { getFlagSource } from '../../common/transducers';
import { SImage } from '../../common/s-components/s-image';
import { isQuestionMarkFlag } from '../transducers';

const UndefinedWhite2 = require('../../../assets/onboarding/flags/UndefinedWhite2.png');

type TProps = {
  markets: TDataApi['items'];
};

export const Flags: React.FC<TProps> = ({ markets }) => {
  return (
    <SRow>
      {/* eslint-disable-next-line array-callback-return */}
      {markets.map((market: any, index: number) => {
        const { code } = market;
        const sourceFlag = isQuestionMarkFlag(code)
          ? UndefinedWhite2
          : getFlagSource(code, 'small', 'white');
        if (index === 0) {
          return (
            <SBox
              key={code}
              zIndex={2}
              backgroundColor="butterflyBush"
              width={28}
              height={28}
              justifyContent="center"
              alignItems="center"
              borderRadius={16}
            >
              <SImage source={sourceFlag} width={22} height={22} />
            </SBox>
          );
        }
        if (index === 1) {
          return (
            <SBox
              key={code}
              zIndex={1}
              ml={-10}
              backgroundColor="butterflyBush"
              width={28}
              height={28}
              justifyContent="center"
              alignItems="center"
              borderRadius={16}
            >
              <SImage source={sourceFlag} width={22} height={22} />
            </SBox>
          );
        }
        if (index === 2) {
          return (
            <SBox
              key={code}
              ml={-10}
              backgroundColor="butterflyBush"
              width={28}
              height={28}
              justifyContent="center"
              alignItems="center"
              borderRadius={16}
            >
              <SImage source={sourceFlag} width={22} height={22} />
            </SBox>
          );
        }
      })}
    </SRow>
  );
};