import React, { memo, useState } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import { Nullable } from 'tsdef';
import { SText } from '../../common/s-components/typography/s-text';
import { theme } from '../../app/theme';
import { SBox } from '../../common/s-components/layout/s-box';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { SRow } from '../../common/s-components/layout/s-row';
import { Icon } from '../../common/components/icon';
import { fp as _ } from '../../common/utils/fp';
import { FlagName } from '../../common/components/flag-name';
import { TopMarketFlag } from './top-market-flag';
import { TVendor } from '../../common/types';
import { ShadowBox } from '../../common/components/shadow-box';
import { SVendorName } from '../s-components/s-vendor-name';
import { SCardText } from '../s-components/s-card-text';

type TProps = {
  chartsLength: number;
  topMarket: Nullable<string>;
  vendor: TVendor;
  onPress: () => void;
};

export const ChartsCard: React.FC<TProps> = memo(props => {
  const { chartsLength, topMarket, vendor, onPress } = props;
  const [pressed, setPressed] = useState(false);
  const vendorName = vendor === 'spotify' ? 'Spotify' : 'Apple Music';
  const cardOpacity = pressed ? 0.7 : 0.9;
  let gradientColor =
    vendor === 'spotify'
      ? theme.gradients.spotifyCharts
      : theme.gradients.appleCharts;
  const cardHeight = 80;

  const showNumberOfCharts = (chartsLength: number) => {
    return `${chartsLength} ${chartsLength > 1 ? 'Charts' : 'Chart'}`;
  };

  return (
    <TouchableWithoutFeedback
      testID="chart-card"
      onPress={onPress}
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
    >
      <SBox height={cardHeight} borderRadius={8} mb={16}>
        <ShadowBox height={cardHeight} borderRadius={8}>
          <SBox
            bg={theme.colors.fiord}
            borderRadius={8}
            overflow="hidden"
            height={cardHeight}
            position="relative"
          >
            <SGradientCard
              colors={gradientColor}
              height="100%"
              width={1}
              borderRadius={0}
              opacity={cardOpacity}
              zIndex={2}
            />
            <SBox px={16} pt={8} pb={13} position="relative" zIndex={4}>
              <SRow alignItems="center" justifyContent="space-between" mb={16}>
                <SRow alignItems="center">
                  <SVendorName>{vendorName}</SVendorName>
                  <Icon ml={8} pt={2} name="next" size={12} color="white" />
                </SRow>
                <SBox pt={1}>
                  <SText semibold>{showNumberOfCharts(chartsLength)}</SText>
                </SBox>
              </SRow>

              <SRow>
                <SCardText bold>Top Market:</SCardText>
                <SRow ml={8} aligItems="center">
                  {_.isNil(topMarket) ? (
                    <SCardText medium>N/A</SCardText>
                  ) : null}
                  {!_.isNil(topMarket) ? (
                    <FlagName small code={topMarket} lineHeight="15px" />
                  ) : null}
                </SRow>
              </SRow>
            </SBox>
            {topMarket ? <TopMarketFlag topMarket={topMarket} /> : null}
          </SBox>
        </ShadowBox>
      </SBox>
    </TouchableWithoutFeedback>
  );
});