import React, { memo } from 'react';
import { Wave1 } from './wave1';
import { Gallery } from './gallery';
import { SBox } from '../../common/s-components/layout/s-box';
import { chartVariants } from '../constants';
import { TTrackItem, TVendor } from '../../common/types';
import { TCardPress, THomeTrack } from '../types';

export type TProps = {
  onInfoPress: (variant: string) => void;
  onBtnEntriesPress: () => void;
  onBtnRemovalsPress: () => void;
  onCardPress: TCardPress;
  additionsLength: number;
  removalsLength: number;
  vendor?: TVendor;
  additions: TTrackItem[];
  removals: TTrackItem[];
  market: string;
};

export const EntriesAndRemovals: React.FC<TProps> = memo(props => {
  const {
    additions,
    removals,
    onBtnEntriesPress,
    onBtnRemovalsPress,
    onCardPress,
    additionsLength,
    removalsLength,
    onInfoPress,
    market,
    vendor,
  } = props;

  return (
    <SBox position="relative" mt={2}>
      <SBox position="absolute" top={-15}>
        <Wave1 vendor={vendor} />
      </SBox>
      <Gallery
        title="Entries"
        cards={additions}
        vendor={vendor}
        variant={chartVariants.entry}
        market={market}
        mb={28}
        onBtnPress={onBtnEntriesPress}
        onCardPress={(params: THomeTrack) =>
          onCardPress({ ...params, type: 'entries' })
        }
        length={additionsLength}
        onInfoPress={() => {
          onInfoPress('entries');
        }}
        showPosition
      />
      <Gallery
        title="Exits"
        cards={removals}
        vendor={vendor}
        variant={chartVariants.removal}
        market={market}
        mb={38}
        onBtnPress={onBtnRemovalsPress}
        onCardPress={(params: THomeTrack) =>
          onCardPress({ ...params, type: 'exits' })
        }
        length={removalsLength}
        onInfoPress={() => {
          onInfoPress('exits');
        }}
      />
    </SBox>
  );
});