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 { SBox } from '../../../common/s-components/layout/s-box';
import { TVendor } from '../../../common/types';
import { Icon } from '../../../common/components/icon';
import { STopicText } from '../../s-components/s-topic-text';

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

export const TopicEntries: React.FC<TProps> = memo(
  ({
    artist,
    name,
    target,
    position,
    variant,
    vendor,
    isChart,
    countryCode,
    flagVariant,
    hasCountryCode,
    showStar,
  }) => {
    const color = variant === 'light' ? 'richBlack' : undefined;
    const space = ' ';
    const marketCode = setMarketCode(countryCode);
    const flagTopPosition = Platform.OS === 'ios' ? -1 : 0;
    return (
      <SBox>
        <SText>
          <STopicText>
            <SText bold color={color}>
              {artist} &ndash;{space}
            </SText>
            <SText bold color={color}>
              {name}{' '}
            </SText>
            {!isChart ? 'has been added to' : 'entered'}
            {showStar ? (
              <>
                {space}
                <Icon name="star2" size={12} color="white" />
              </>
            ) : null}
            {space}
            <SText bold color={color}>
              {target}
            </SText>
            {isChart && hasCountryCode ? (
              <>
                <STopicText>&nbsp;</STopicText>
                <Flag
                  variant={flagVariant}
                  marginTop={flagTopPosition}
                  market={marketCode}
                  width={16}
                  height={16}
                  inlineFlag
                />
              </>
            ) : null}
            {space}
            {space}
            at&nbsp;position&nbsp;
          </STopicText>
          {!isChart ? (
            <>
              <STopicText>
                <SText bold color={color}>
                  {position}{' '}
                </SText>
                <SText>on</SText>
                <SText bold>
                  &nbsp;{vendor === 'spotify' ? 'Spotify' : 'Apple Music'}
                  {space}
                </SText>
              </STopicText>
              {hasCountryCode ? (
                <>
                  <STopicText>&nbsp;</STopicText>
                  <Flag
                    variant={flagVariant}
                    marginTop={flagTopPosition}
                    market={marketCode}
                    width={16}
                    height={16}
                    inlineFlag
                  />
                </>
              ) : null}
            </>
          ) : (
            <STopicText bold color={color}>
              {position}
            </STopicText>
          )}
        </SText>
      </SBox>
    );
  }
);

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