import React, { memo } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { TVendor } from '../../../common/types';
import { TPlaylistCard } from '../../types';
import { TOP_PLAYLIST_CARD_HEIGHT } from '../../constants';
import { theme } from '../../../app/theme';
import { CardHeading } from './card-heading';
import { CardBody } from './card-body';
import { Wave } from './wave';
import { Personalized } from './personalized';
import { TouchableCard } from '../../../common/components/touchable-card';
import { StarredLabel } from '../../../common/components/starred-label';

type TProps = {
  vendor: TVendor;
  onPress: () => void;
  streamsType: string;
} & TPlaylistCard;

export const Card: React.FC<TProps> = memo(props => {
  const {
    image_url,
    name,
    updated,
    current_position,
    trend,
    moved,
    country_code,
    streams,
    onPress,
    vendor,
    personalized,
    starred,
    streamsType,
  } = props;
  const borderRadius = 8;

  return (
    <TouchableCard
      testID="top-playlists-touchable-card"
      onPress={onPress}
      borderRadius={borderRadius}
      height={TOP_PLAYLIST_CARD_HEIGHT}
      variant="shadow"
      containerStyle={{ mx: 16 }}
      bgImage={image_url}
      bgStyle={{ bg: theme.colors.eastBay }}
      gradient={{
        tapped: { colors: theme.gradients.playlistTrackCardTapped },
        default: { colors: theme.gradients.playlistTrackCard },
      }}
      renderWave={(pressed: boolean) => {
        return <Wave pressed={pressed} vendor={vendor} />;
      }}
    >
      <SBox position="relative" overflow="hidden" borderRadius={8}>
        <SBox px={16} pt={16} position="relative" zIndex={3}>
          <CardHeading title={name} date={updated} />
          <CardBody
            position={current_position}
            trend={trend}
            addedDate={moved}
            market={country_code}
            streams={streams}
            personalized={personalized}
            streamsType={streamsType}
          />
        </SBox>
      </SBox>
      <SBox position="absolute" bottom={15} px={16}>
        {personalized ? <Personalized text="Personalized" /> : null}
      </SBox>
      {starred ? <StarredLabel /> : null}
    </TouchableCard>
  );
});