import React, { useState, memo } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import { SText } from '../s-components/typography/s-text';
import { SBox } from '../s-components/layout/s-box';
import { SImage } from '../s-components/s-image';
import { SH3 } from '../s-components/typography/s-h3';
import { SPositionBadge } from '../s-components/s-position-badge';
import { theme } from '../../app/theme';
import { SGradientCard } from '../s-components/s-gradient-card';
import { ShadowBox } from './shadow-box';
import { SH5 } from '../s-components/typography/s-h5';
import { TTrackId, TTrackItem } from '../types';
import { StarredLabel } from './starred-label';
import { SRow } from '../s-components/layout/s-row';
import { DistributorIcon } from './distributor-icon';

type TProps = TTrackItem & {
  onPress: (id: TTrackId) => void;
};

export const Card: React.FC<TProps> = memo(props => {
  const width = 198;
  const height = 128;
  const {
    id,
    image_url,
    image_url_big,
    artist,
    artists,
    name,
    showStarred,
    starred,
    position,
    onPress,
    showPosition,
    distributed_by,
  } = props;
  const [pressed, setPressed] = useState(false);
  const uri = image_url_big || image_url;

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        onPress(id);
      }}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
    >
      <SBox width={width} height={height}>
        <ShadowBox height={height}>
          <SBox flex={1} width={width} overflow="hidden" borderRadius={12}>
            <SBox
              width={width}
              height={height}
              borderRadius={12}
              bg="comet"
              position="absolute"
            />
            {uri ? (
              <SImage
                width={width}
                height={height}
                borderRadius={12}
                source={{
                  uri,
                }}
              />
            ) : null}
            <SGradientCard
              colors={
                !pressed ? theme.gradients.card : theme.gradients.cardPressed
              }
              locations={!pressed ? [0, 0.3847, 1] : [0, 0.3652, 1]}
              start={[0, 0]}
              end={[0, 1]}
              height={height}
              width={width + 0.5}
              borderRadius={12}
            />
          </SBox>

          <SBox position="absolute" right={0}>
            {showStarred && starred ? <StarredLabel /> : null}
          </SBox>

          <SRow position="absolute" top={16} left={16}>
            {showPosition ? (
              <SPositionBadge>
                <SH5 testID="track-position">#{position}</SH5>
              </SPositionBadge>
            ) : null}
            {distributed_by ? (
              <SBox>
                <DistributorIcon variant={distributed_by} rounded />
              </SBox>
            ) : null}
          </SRow>

          <SBox position="absolute" bottom={13} px={16} width={width}>
            <SBox flexDirection="row">
              <SH3 numberOfLines={1} mb={1} testID="track-name">
                {name}
              </SH3>
            </SBox>
            <SBox flexDirection="row">
              <SText numberOfLines={1} testID="track-artist">
                {artists || artist}
              </SText>
            </SBox>
          </SBox>
        </ShadowBox>
      </SBox>
    </TouchableWithoutFeedback>
  );
});

// background: linear-gradient(180deg, rgba(31,34,51,0) 0%, rgba(31,34,51,0.5) 38.47%, rgba(31,34,51,0.9) 100%);

Card.defaultProps = {
  onPress: () => {},
  artists: '',
  position: undefined,
  image_url: undefined,
  image_url_big: undefined,
  showStarred: false,
  starred: false,
  showPosition: false,
  // change: undefined,
};