import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SwipeableList } from '../../common/components/swipeable-list';
import { ErrorBlock } from '../../common/components/error-block';
import { InfoTitle } from '../../common/components/info-title';
import { EmptyGallery } from './empty-gallery';
import { chartVariants } from '../constants';
import { TCardPress, TCardsError } from '../types';
import { TTrack } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';
import { TToggleStarred } from '../../common/submodules/starring-tracks/types';
import { EStarSourcePages } from '../../common/constants';

export type TProps = {
  market: string;
  cards: TTrack[];
  onCardPress: TCardPress;
  onInfoPress: () => void;
  onCardPressRight?: TToggleStarred;
  error?: TCardsError;
};

export const ChartMovements: React.FC<TProps> = props => {
  const {
    cards,
    market,
    onCardPress,
    onCardPressRight,
    onInfoPress,
    error,
  } = props;

  const isEmpty = !_.length(cards);

  return (
    <SBox mb={32}>
      <InfoTitle
        testID="info-title-major-moves"
        onPress={onInfoPress}
        px={16}
        mb={3}
        title="Major Moves"
      />

      {!error && !isEmpty ? (
        <SwipeableList
          testID="charts-movements-swipeable-list"
          cards={cards}
          onPress={onCardPress}
          onPressRight={onCardPressRight}
          pageVariant="home"
          starSource={EStarSourcePages.Homemoves}
        />
      ) : null}
      {!error && isEmpty ? (
        <SBox mt={16}>
          <EmptyGallery market={market} variant={chartVariants.movement} />
        </SBox>
      ) : null}
      {error ? <ErrorBlock message={error} mt={16} /> : null}
    </SBox>
  );
};