import React, { memo } from 'react';
import { Platform } from 'react-native';
import { SBox } from '../../../../common/s-components/layout/s-box';
import { SH3 } from '../../../../common/s-components/typography/s-h3';
import { TCardVariant, TPlaylist } from '../../../types';
import { Media } from '../../../../common/components/media';
import { SRow } from '../../../../common/s-components/layout/s-row';
import { SCol } from '../../../../common/s-components/layout/s-col';
import { formatStreamDigit } from '../../../../common/transducers';
import { SDot } from '../../../../common/s-components/s-dot';
import { theme } from '../../../../app/theme';
import { SName } from '../../../s-components/card/s-name';
import { fp as _ } from '../../../../common/utils/fp';
import { PositionTrends } from '../../../../common/components/position-trends';

type TProps = {
  name: TPlaylist['name'];
  variant: TCardVariant;
  trend: TPlaylist['trend'];
  current_position: TPlaylist['current_position'];
  is_new: TPlaylist['is_new'];
  personalized: TPlaylist['personalized'];
};

export const Header: React.FC<TProps> = memo(props => {
  const {
    name,
    personalized,
    variant,
    trend,
    current_position,
    is_new,
  } = props;
  const validPosition = !!current_position || current_position === 0;
  const isAndroid = Platform.OS === 'android';
  const positionTrend = {
    value: trend,
    valueFormatted: formatStreamDigit(trend),
  };

  return (
    <SBox flex={1} pt={14}>
      <Media px={16} pb={2}>
        <SBox pl={isAndroid ? 1 : 0}>
          <SName numberOfLines={1}>{_.isNil(name) ? 'N/A' : name}</SName>
        </SBox>
        {variant === 'adds' && !personalized ? (
          <Media.Figure alignItems="flex-end" pl={5}>
            <SRow>
              <SCol mr={2} mt={2}>
                <SH3 medium letterSpacing={1} numberOfLines={1}>
                  {validPosition ? `#${current_position}` : 'N/A'}
                </SH3>
              </SCol>
              <SCol>
                {trend ? (
                  <PositionTrends trend={positionTrend} ml={7} mt={5} />
                ) : null}
                {is_new ? (
                  <SDot mt={9} ml={8} mr={2} bg={theme.colors.dodgerBlue} />
                ) : null}
              </SCol>
            </SRow>
          </Media.Figure>
        ) : null}
      </Media>
    </SBox>
  );
});