import React, { memo } from 'react';
import { Dimensions, FlatList } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { getKeyComposed } from '../../../common/transducers';
import { Card } from './card';
import { TTracklistsCardsDataRes } from '../../types';
import { TVendor } from '../../../common/types';
import { fp as _ } from '../../../common/utils/fp';

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

type TProps = {
  cards: TTracklistsCardsDataRes;
  vendor: TVendor;
};

export const HorizontalCarousel: React.FC<TProps> = memo(props => {
  const { cards, vendor } = props;
  const isSpotify = vendor === 'spotify';
  const appleSlideWidth = Math.floor((DEVICE_WIDTH - 16) / 2 - 16);

  return (
    <SBox>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        data={cards}
        scrollEnabled={isSpotify}
        keyExtractor={getKeyComposed(['id'])}
        // @ts-ignore
        renderItem={props => {
          const { item, index } = props;

          if (!isSpotify && index === 0) return false;

          return (
            <SBox
              ml={16}
              mr={index === _.length(cards) - 1 ? 16 : 0}
              pb={16}
              width={isSpotify ? 134 : appleSlideWidth}
            >
              <Card {...item} />
            </SBox>
          );
        }}
      />
    </SBox>
  );
});