import React, { memo } from 'react';
import { Platform } from 'react-native';
import { SText } from '../../../common/s-components/typography/s-text';
import { Flag } from '../../../common/components/flag';
import { setMarketCode } from '../../../common/transducers';
import { TVendor } from '../../../common/types';
import { STopicText } from '../../s-components/s-topic-text';
import { Icon } from '../../../common/components/icon';

type TProps = {
  artist: string;
  name: string;
  target: string;
  change: number;
  position: number;
  variant?: 'light' | 'dark';
  vendor: TVendor;
  isChart: boolean;
  countryCode: string;
  flagVariant: string;
  hasCountryCode: boolean;
  showStar: boolean;
};

export const TopicMajorMoves: React.FC<TProps> = memo(
  ({
    artist,
    name,
    target,
    change,
    position,
    variant,
    vendor,
    isChart,
    countryCode,
    flagVariant,
    hasCountryCode,
    showStar,
  }) => {
    const goUp = change < 0;
    const color = variant === 'light' ? 'richBlack' : undefined;
    const space = ' ';
    const marketCode = setMarketCode(countryCode);
    const flagTopPosition = Platform.OS === 'ios' ? -1 : 0;

    return (
      <STopicText color={color}>
        <SText bold color={color}>
          {artist} &ndash;{space}
        </SText>
        <SText bold color={color}>
          {name}{' '}
        </SText>
        moved {goUp ? 'up' : 'down'}
        {space}
        <SText bold color={color}>
          {Math.abs(change)}
        </SText>
        {space}
        spots on{space}
        {showStar ? (
          <>
            <Icon name="star2" size={12} color="white" />
            {space}
          </>
        ) : null}
        <SText bold color={color}>
          {target}
        </SText>
        {isChart && hasCountryCode ? (
          <>
            <SText>&nbsp;</SText>
            <SText>&nbsp;</SText>
            <Flag
              variant={flagVariant}
              marginTop={flagTopPosition}
              market={marketCode}
              width={16}
              height={16}
              inlineFlag
            />
            {space}
          </>
        ) : null}
        {space}
        to position{space}
        {isChart ? (
          <SText bold color={color}>
            {position}
          </SText>
        ) : (
          <>
            <SText bold color={color}>
              {position}
              {space}
            </SText>
            <SText color={color}>on</SText>
            <SText bold color={color}>
              &nbsp;{vendor === 'spotify' ? 'Spotify' : 'Apple Music'}
            </SText>
            {hasCountryCode ? (
              <>
                <SText>&nbsp;</SText>
                <SText>&nbsp;</SText>
                <Flag
                  variant={flagVariant}
                  marginTop={flagTopPosition}
                  market={marketCode}
                  width={16}
                  height={16}
                  inlineFlag
                />
              </>
            ) : null}
          </>
        )}
      </STopicText>
    );
  }
);

TopicMajorMoves.defaultProps = {
  variant: 'dark',
  countryCode: undefined,
  flagVariant: 'light',
};