import React, { memo, useCallback } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { Header } from './header';
import { ByGenderCardDominator } from './by-gender-card-dominator';
import { ByGenderCard } from './by-gender-card';
import { fp as _ } from '../../common/utils/fp';
import { GENDER_HEIGHT } from '../constants';
import { Empty } from './empty';
import { ErrorBlock } from '../../common/components/error-block';
import {
  TAmplitudeDemographicsOptions,
  TByGenderEntityColorized,
  TGenderItemColorized,
} from '../types';
import { TCustomRangeEntity, TVendor } from '../../common/types';
import { getCssRulesForLayout } from '../transducers';

type TProps = {
  amplitudeParams: TAmplitudeDemographicsOptions;
  onPressCard: (variant: string) => void;
  byGender?: TByGenderEntityColorized;
  range: TCustomRangeEntity;
  isEmpty: boolean;
  isError: boolean;
  vendor: TVendor;
};

export const ByGender: React.FC<TProps> = memo(props => {
  const {
    onPressCard,
    amplitudeParams,
    byGender,
    range,
    isEmpty,
    isError,
    vendor,
    ...rest
  } = props;
  const { dominator, items, donutColors } = byGender || {};
  const gendersCount = _.length(items || []);
  const vendorText = vendor === 'spotify' ? 'Spotify' : 'Apple Music';

  const renderCards = useCallback(
    (
      gendersCount: number,
      dominator: TGenderItemColorized | undefined,
      idx: number,
      card: TGenderItemColorized
    ) => {
      const cssRules = getCssRulesForLayout(dominator, gendersCount, idx);
      const isSmallCard = !!dominator && gendersCount === 4;

      return (
        <ByGenderCard
          key={card.id}
          card={card}
          cssRules={cssRules}
          variant={isSmallCard ? 'small' : 'large'}
          onPressCard={onPressCard}
          amplitudeParams={amplitudeParams}
        />
      );
    },
    [onPressCard, amplitudeParams]
  );

  return (
    <SBox pb={32} {...rest}>
      <Header title="By Gender" range={range} pb={20} px={16} />

      {isEmpty && !isError ? (
        <Empty vendor={vendor} vendorText={vendorText} variant="large" />
      ) : null}

      {isError && !isEmpty ? (
        <ErrorBlock
          height={GENDER_HEIGHT}
          message={`${vendorText} data failed to load.`}
        />
      ) : null}

      {!isEmpty && !isError ? (
        <SBox
          height={GENDER_HEIGHT}
          flexDirection="row"
          flexWrap={dominator ? 'nowrap' : 'wrap'}
        >
          {dominator ? (
            <>
              <ByGenderCardDominator
                card={dominator}
                donutColors={donutColors}
                onPressCard={onPressCard}
                amplitudeParams={amplitudeParams}
              />
              <SBox width={1}>
                {items &&
                  items.map((card, idx) => {
                    if (dominator && idx === 0) return null;
                    return renderCards(gendersCount, dominator, idx, card);
                  })}
              </SBox>
            </>
          ) : (
            <>
              <SBox width={1} height={GENDER_HEIGHT / 2} flexDirection="row">
                {items &&
                  items.map((card, idx) => {
                    if (idx > 1) return null;
                    return renderCards(gendersCount, dominator, idx, card);
                  })}
              </SBox>
              <SBox width={1} height={GENDER_HEIGHT / 2} flexDirection="row">
                {items &&
                  items.map((card, idx) => {
                    if (idx < 2) return null;
                    return renderCards(gendersCount, dominator, idx, card);
                  })}
              </SBox>
            </>
          )}
        </SBox>
      ) : null}
    </SBox>
  );
});