import React, { memo } from 'react';
import { Wave2 } from './wave2';
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 } 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 Entries: React.FC<TProps> = memo(props => {
  const {
    error,
    cards,
    onBtnPress,
    onCardPress,
    onInfoPress,
    length,
    market,
    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}>
          <Wave2 vendor={vendor} />
        </SBox>
      ) : null}
      <Gallery
        vendor={vendor}
        variant={chartVariants.entry}
        market={market}
        title="Entries"
        cards={cards}
        mb={error ? 44 : 38}
        length={length}
        error={error && 'Data failed to load.'}
        onBtnPress={onBtnPress}
        onCardPress={onCardPress}
        onInfoPress={() => {
          onInfoPress('entries');
        }}
        showPosition
      />
    </SBox>
  );
});