import React, { memo } from 'react';
import { FlatList } from 'react-native';
import { fp as _ } from '../../common/utils/fp';
import { SBox } from '../../common/s-components/layout/s-box';
import { Card } from '../../common/components/card';
import { TGoToTrack } from '../types';
import { TTrackItem } from '../../common/types';
import { NON_SONY } from '../../analytics/constants';

export type TProps = {
  cards?: TTrackItem[];
  showPosition?: boolean;
  showStarred: boolean;
  onCardPress: TGoToTrack;
};

export const HorizontalCarousel: React.FC<TProps> = memo(props => {
  const { cards, onCardPress, showPosition } = props;

  return (
    // https://stackoverflow.com/a/49918614/6190198
    <SBox height={144} onStartShouldSetResponder={() => true}>
      <FlatList
        testID="daily-digest-carousel"
        horizontal
        showsHorizontalScrollIndicator={false}
        data={cards}
        keyExtractor={_.path<any, string>('id')}
        renderItem={props => {
          const { item, index } = props;
          return (
            <SBox ml={index === 0 ? 16 : 0} mr={16}>
              <Card
                {...item}
                showStarred
                showPosition={showPosition}
                onPress={() => {
                  onCardPress({
                    trackId: item.id,
                    vendor: item.vendor,
                    isrc: item.isrc,
                    is_starred_track: item.is_starred_track,
                    name: item.name,
                    artist: item.artist,
                    artists: item.artists,
                    distributor: item.distributed_by || NON_SONY,
                  });
                }}
              />
            </SBox>
          );
        }}
      />
    </SBox>
  );
});

HorizontalCarousel.defaultProps = {
  showPosition: false,
};