import React, { memo } from 'react';
import { Wave3 } from './wave3';
import { Gallery } from './gallery';
import { SBox } from '../../common/s-components/layout/s-box';
import { chartVariants } from '../constants';
import { TVendor, TTrackItem } from '../../common/types';
import { TGoToTrack, THomeTrack } from '../types';
import { fp as _ } from '../../common/utils/fp';

export type TProps = {
  onInfoPress: (variant: string) => void;
  onBtnPress: () => void;
  onCardPress: TGoToTrack;
  length: number;
  cards: TTrackItem[];
  error: boolean;
  market: string;
  vendor?: TVendor;
};

export const Removals: React.FC<TProps> = memo(props => {
  const {
    error,
    cards,
    market,
    onBtnPress,
    onCardPress,
    onInfoPress,
    length,
    vendor,
  } = props;

  const isEmpty = !_.length(cards);
  const topMargin = !error ? 13 : -11;

  return (
    <SBox position="relative" mt={topMargin}>
      {!error && !isEmpty ? (
        <SBox position="absolute" zIndex={-1} top={-15}>
          <Wave3 vendor={vendor} />
        </SBox>
      ) : null}
      <Gallery
        title="Exits"
        cards={cards}
        variant={chartVariants.removal}
        market={market}
        vendor={vendor}
        mb={error ? 54 : 50}
        length={length}
        onBtnPress={onBtnPress}
        error={error && 'Data failed to load.'}
        onCardPress={(params: THomeTrack) => {
          onCardPress(params);
        }}
        onInfoPress={() => {
          onInfoPress('exits');
        }}
      />
    </SBox>
  );
});