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

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

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

    return (
      <STopicText color={color}>
        <SText bold color={color}>
          {artist} &ndash;{space}
        </SText>
        <SText bold color={color}>
          {name}
          {space}
        </SText>
        {isChart ? 'exited' : 'has been removed from'}
        {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}
        at&nbsp;position&nbsp;
        {isChart ? (
          <SText bold color={color}>
            {position}
          </SText>
        ) : (
          <>
            <SText bold color={color}>
              {position}
              {space}
            </SText>
            <SText color={color}>on</SText>
            <SText bold color={color}>
              &nbsp;{isSpotify ? '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>
    );
  }
);

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