import React, { memo } from 'react';
import { Dimensions } from 'react-native';
import { theme } from '../../app/theme';
import { SText } from '../../common/s-components/typography/s-text';
import { SRow } from '../../common/s-components/layout/s-row';
import { SBox } from '../../common/s-components/layout/s-box';
import { Flag } from '../../common/components/flag';
import { FlagName } from '../../common/components/flag-name';
import { SPositionLabel } from '../s-components/s-position-label';
import { PositionTrendsLabel } from '../../common/components/position-trends-label';
import { SCol } from '../../common/s-components/layout/s-col';
import { SContainerCard } from '../s-components/s-container-card';
import { SGradientCard } from '../s-components/s-gradient-card';
import { SSmallText } from '../s-components/s-small-text';
import { SBlueDot } from '../../common/s-components/s-blue-dot';
import { TPreparedChartsItem } from '../types';
import { formatStreamDigit } from '../../common/transducers';
import { CARD_EXTENDED_HEIGHT, CARD_HEIGHT, SORT_BY } from '../constants';

const { width: screenWidth } = Dimensions.get('window');

type TProps = TPreparedChartsItem & { sortVariant: string };

export const ListItem: React.FC<TProps> = memo(props => {
  const {
    position,
    change,
    country_code,
    marketCode,
    chartFor,
    addedDateFormatted,
    is_new,
    is_re_enter,
    sortVariant,
    peak_position,
  } = props;
  const baseNameWidth = screenWidth - 195;
  const isBlueDot = is_new || is_re_enter;

  return (
    <SContainerCard
      testID="chart-placements-card"
      height={sortVariant === SORT_BY.rank ? CARD_HEIGHT : CARD_EXTENDED_HEIGHT}
    >
      <SGradientCard
        colors={theme.gradients.trackChartsCard}
        locations={[0, 0.564, 1]}
      />
      <SBox px={16} pt={11} height={CARD_HEIGHT}>
        {/* Top row */}
        <SRow justifyContent="space-between" mb={31}>
          <SCol justifyContent="center">
            <SRow>
              <SBox mr={13} ml={2}>
                <Flag
                  market={marketCode}
                  width={22}
                  height={22}
                  marginTop={0}
                  variant="light"
                />
              </SBox>
              <SBox width={baseNameWidth} mt={1}>
                <FlagName capitalize code={country_code} />
              </SBox>
            </SRow>
          </SCol>
          <SCol justifyContent="center">
            <SRow
              mt={-3}
              mr={change ? -4 : 0}
              alignItems={!isBlueDot ? 'flex-end' : 'center'}
              height={20}
              justifyContent="flex-end"
            >
              {position ? (
                <SPositionLabel medium>#{position}</SPositionLabel>
              ) : null}
              {isBlueDot ? (
                <SBlueDot ml={1} mr={2} mt={6} />
              ) : (
                <PositionTrendsLabel
                  trend={{
                    value: change,
                    valueFormatted: formatStreamDigit(change),
                  }}
                  showZerroTrend
                  isTransparent
                  isReversed
                />
              )}
            </SRow>
          </SCol>
        </SRow>
        {/* Middle row */}
        <SRow justifyContent="flex-end" mb={9}>
          <SCol>
            <SSmallText medium>Added</SSmallText>
          </SCol>
        </SRow>
        {/* Bottom row */}
        <SRow justifyContent="space-between">
          <SCol>
            <SSmallText medium>{chartFor}</SSmallText>
          </SCol>
          <SCol mt={-2}>
            <SText>{addedDateFormatted}</SText>
          </SCol>
        </SRow>
      </SBox>

      {sortVariant === SORT_BY.position ? (
        <SRow
          bg="pickledBluewood"
          height={40}
          px={16}
          alignItems="center"
          justifyContent="space-between"
        >
          <SSmallText normal>Peak Position</SSmallText>
          <SText
            fontSize={16}
            letterSpacing={1}
            lineHeight="16px"
          >{`#${peak_position}`}</SText>
        </SRow>
      ) : null}
    </SContainerCard>
  );
});