import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { SText } from '../../common/s-components/typography/s-text';
import { ShadowBox } from '../../common/components/shadow-box';
import { Placeholder } from '../../common/components/placeholder';
import { chartVariants } from '../constants';
import { SEmptyGalleryText } from '../s-components/s-empty-gallery-text';

export type TProps = {
  market: string;
  variant: string;
};

export const EmptyGallery: React.FC<TProps> = props => {
  const { market, variant } = props;
  const getBold = (val: string) => <SText bold>{val}</SText>;
  let text;
  let textTopMargin = 6;

  switch (variant) {
    case chartVariants.entry:
      text = (
        <SEmptyGalleryText>
          No tracks entered this
          {'\n'}chart today for {getBold(market)}.
        </SEmptyGalleryText>
      );
      break;
    case chartVariants.removal:
      text = (
        <SEmptyGalleryText>
          No tracks exited this
          {'\n'}chart today for {getBold(market)}.
        </SEmptyGalleryText>
      );
      break;
    case chartVariants.movement:
      textTopMargin = -5;
      text = (
        <SEmptyGalleryText>
          There are no major
          {'\n'}moves on this chart
          {'\n'}today for {getBold(market)}.
        </SEmptyGalleryText>
      );
      break;
    default:
      text = null;
  }

  return (
    <SBox justifyContent="center" px={16} mt={0} mb={3} height={128}>
      <ShadowBox
        height={128}
        showShadow={false}
        bg="fiord"
        borderRadius={8}
        alignItems="center"
      >
        <SRow mt={38}>
          <SBox justifyContent="center" alignItems="center" flex={2}>
            <Placeholder variant={variant} baseWidth={104} baseHeight={185} />
          </SBox>
          <SBox mt={textTopMargin} ml={-2} flex={3}>
            {text}
          </SBox>
        </SRow>
      </ShadowBox>
    </SBox>
  );
};