import React from 'react';
import { Undefinable } from 'tsdef';
import { SBox } from '../../common/s-components/layout/s-box';
import { theme } from '../../app/theme';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { DotLine } from '../../common/components/dot-line';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { SH4 } from '../../common/s-components/typography/s-h4';
import { getMarketArticleValue } from '../../common/transducers';
import { UNBREAKABLE_SPACE } from '../../common/constants';
import { TVendor } from '../../common/types';

export type TProps = {
  vendor: Undefinable<TVendor>;
  market: string;
};

export const InfoMoves: React.FC<TProps> = props => {
  const { vendor, market } = props;
  const title = vendor === 'spotify' ? 'Spotify Daily' : 'Apple Music';
  const chartQuantity = vendor === 'spotify' ? '200' : '100';
  const marketValue = getMarketArticleValue(market);

  return (
    <SBox pb={5} pt={5}>
      <SBox alignItems="center" px={16}>
        <SInfoTitle mb={8}>What are Major Moves?</SInfoTitle>
        <SInfoParagraph center>
          A track&apos;s movement on the {title}
          {'\n'} Top {chartQuantity} chart in{' '}
          <SH4 color={theme.colors.richBlack}>{marketValue}</SH4>
          {'\n'} in the past 24 hours.
        </SInfoParagraph>
      </SBox>
      <SBox mt={18} mb={32} width={1} height={1} bg={theme.colors.snuff} />
      <SBox pl={16} pr={30}>
        <DotLine>
          The arrow on{UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}bottom left shows
          how many positions (up or down) a{UNBREAKABLE_SPACE}track has moved.
        </DotLine>
        <DotLine>
          The number on{UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}right is a
          {UNBREAKABLE_SPACE}track’s current position.
        </DotLine>
      </SBox>
    </SBox>
  );
};