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

type TProps = {
  entity: TState['adds'] | TState['removals'];
  vendor: TVendor;
  variant: 'adds' | 'removals';
};

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

export const HorizontalCarousel: React.FC<TProps> = memo(props => {
  const { entity, vendor, variant } = props;

  const cards = _.path('data', entity)!;
  const streamsType = _.path('extra.streams_type', entity);
  const cardWidth = cards!.length === 1 ? DEVICE_WIDTH - 32 : 'auto';
  const cardVariant = cards!.length === 1 ? `${variant}-fullsize` : variant;

  return (
    <SBox>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        data={cards}
        scrollEnabled={cards.length > 1}
        keyExtractor={getKeyComposed(['id', 'country_code'])}
        renderItem={props => {
          const { item, index } = props;
          return (
            <SBox ml={index === 0 ? 16 : 0} mr={16} pb={16} width={cardWidth}>
              <PlaylistCard
                {...item}
                vendor={vendor}
                variant={cardVariant as TCardVariant}
                streamsType={streamsType}
              />
            </SBox>
          );
        }}
      />
    </SBox>
  );
});