import React, { memo } from 'react';
import { FlatList } from 'react-native';
import { Nullable } from 'tsdef';
import { fp as _ } from '../../common/utils/fp';
import { SBox } from '../../common/s-components/layout/s-box';
import { CARD_HEIGHT } from '../constants';
import { Card } from './card';
import { CardEmptyGlobal } from './card-empty-global';
import { CardEmpty } from './card-empty';
import { NMarket } from '../../common/types';

type TProps = {
  cards: Nullable<NMarket.TMarketItem>[];
  onCardPress: (market: string) => void;
};

export const HorizontalCarousel: React.FC<TProps> = memo(props => {
  const { cards, onCardPress } = props;
  const cardPressed = (index: number) => {
    const market = _.path([index, 'header', 'market'], cards) as string;
    onCardPress(market);
  };

  return (
    <SBox height={CARD_HEIGHT + 12}>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        data={cards}
        keyExtractor={_.pathOr('empty', ['header', 'market'])}
        testID="track-markets"
        renderItem={props => {
          const { item, index } = props;
          return (
            <SBox
              pl={index === 0 ? 16 : 0}
              pr={16}
              key={index}
              testID={`track-markets-${index}`}
            >
              {item === null ? <CardEmptyGlobal /> : null}
              {_.pathEq(['empty'], true, item) ? (
                <CardEmpty
                  marketCode={item!.header.marketName}
                  marketFullName={item!.header.marketNameLong}
                />
              ) : null}
              {_.pathEq(['empty'], false, item) ? (
                <Card
                  itemData={item!}
                  disabled={item!.error}
                  onPress={() => {
                    cardPressed(index);
                  }}
                />
              ) : null}
            </SBox>
          );
        }}
      />
    </SBox>
  );
});