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

type TProps = {
  name: string;
  variant?: 'light' | 'dark';
  vendor: TVendor;
  countryCode: string;
  flagVariant: string;
  hasCountryCode: boolean;
};

export const TopicTracklistUpdate: React.FC<TProps> = memo(
  ({ name, variant, countryCode, flagVariant, hasCountryCode, vendor }) => {
    const color = variant === 'light' ? 'richBlack' : undefined;
    const space = ' ';
    const marketCode = setMarketCode(countryCode);

    return (
      <SBox>
        <STopicText color={color}>
          <Icon name="star2" size={12} color="white" />
          <SText lineHeight="20px">&nbsp;</SText>
          <SText bold color={color}>
            {name}
            {space}
          </SText>
          tracklist has been updated on{space}
          <SText bold>{vendor === 'spotify' ? 'Spotify' : 'Apple Music'}</SText>
          {hasCountryCode ? (
            <>
              <SText lineHeight="20px">&nbsp;</SText>
              <Flag
                variant={flagVariant}
                marginTop={0}
                market={marketCode}
                width={16}
                height={16}
                inlineFlag
              />
            </>
          ) : null}
        </STopicText>
      </SBox>
    );
  }
);

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