import React, { memo } from 'react';
import { HorizontalCarousel } from './horizontal-carousel';
import { SBox } from '../../common/s-components/layout/s-box';
import { Button } from '../../common/components/button';
import { SRow } from '../../common/s-components/layout/s-row';
import { ErrorBlock } from '../../common/components/error-block';
import { InfoTitle } from '../../common/components/info-title';
import { EmptyGallery } from './empty-gallery';
import { TCardsError, TGoToTrack } from '../types';
import { TTrackItem, TVendor } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';

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

export const Gallery: React.FC<TProps> = memo(props => {
  const {
    cards,
    vendor,
    market,
    variant,
    title,
    onBtnPress,
    onCardPress,
    onInfoPress,
    error,
    length,
    showPosition,
    ...rest
  } = props;
  const hideButton = length <= 1;
  const buttonVariant = vendor === 'spotify' ? 'green' : 'red';
  const isEmpty = !_.length(cards);

  return (
    <SBox {...rest}>
      <SRow
        justifyContent="space-between"
        alignItems="center"
        px={16}
        mb={hideButton ? 35 : 24}
        mt={error ? 22 : 0}
      >
        <InfoTitle
          testID="info-title-gallery"
          onPress={onInfoPress}
          position="relative"
          title={title}
        />
        {!hideButton ? (
          <Button
            testID="gallery-press-button"
            width={140}
            px={10}
            variant={buttonVariant}
            onPress={() => {
              if (typeof onBtnPress === 'function') {
                onBtnPress();
              }
            }}
          >
            Show All ({length})
          </Button>
        ) : null}
      </SRow>

      {error ? <ErrorBlock mb={-12} message={error} /> : null}

      {!error && isEmpty ? (
        <EmptyGallery market={market} variant={variant} />
      ) : null}

      {!error && !isEmpty ? (
        <HorizontalCarousel
          cards={cards}
          onCardPress={onCardPress}
          showPosition={showPosition}
          showStarred
        />
      ) : null}
    </SBox>
  );
});

Gallery.defaultProps = {
  showPosition: false,
};