import React, { memo } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { SRow } from '../../common/s-components/layout/s-row';
import { Icon } from '../../common/components/icon';
import { ToggleStyled } from '../../common/components/toggle-styled';
import { onGenderTilePress } from '../../analytics';
import { TAmplitudeDemographicsOptions, TGenderItemColorized } from '../types';
import { fp as _ } from '../../common/utils/fp';
import { TCssRules } from '../../common/types';
import { STextFormatted } from '../s-components/s-text-formatted';
import { SCardPercentSmall } from '../s-components/s-card-percent-small';
import { SCardPercent } from '../s-components/s-card-percent';

type TProps = {
  card: TGenderItemColorized;
  cssRules: TCssRules;
  variant: 'small' | 'large';
  onPressCard: (variant: string) => void;
  amplitudeParams: TAmplitudeDemographicsOptions;
};
export const ByGenderCard: React.FC<TProps> = memo(props => {
  const { card, cssRules, variant, onPressCard, amplitudeParams } = props;
  const isSmall = variant === 'small';
  const btnMarginBottom = isSmall ? '22px' : '42px';
  const flexDirection = isSmall ? 'row' : 'column';
  const justifyContent = isSmall ? 'space-between' : 'flex-start';
  const { id, name, isrc, vendor } = amplitudeParams;
  const formattedMarginTop = isSmall ? '3px' : '2px';
  const shadowHeight = isSmall ? 80 : 128;
  return (
    <ToggleStyled
      testID="gender-card-toggle"
      {...cssRules}
      shadowHeight={shadowHeight}
      variant="shadow"
      tappedCss={{ opacity: !card.empty ? 0.7 : 1 }}
      defaultCss={{ opacity: 1 }}
      tappedBg={card.empty ? _.path('colors.bg', card) : undefined}
      defaultBg={card.empty ? _.path('colors.bg', card) : undefined}
      tappedGradient={card.empty ? _.path('colors.fg', card) : card.colors}
      defaultGradient={card.empty ? _.path('colors.fg', card) : card.colors}
      onPress={() => {
        if (!card.empty) {
          onPressCard(`market-${card.label}-distribution`);
          onGenderTilePress({
            source_track_id: id,
            source_track_name: name,
            source_track_isrc: isrc,
            demographics_vendor: _.capitalize(vendor),
            demographics_gender: _.capitalize(card.label),
          });
        }
      }}
    >
      <SBox px={16} py={14}>
        <SBox mb={btnMarginBottom}>
          <SRow>
            <SH6 color={card.empty ? 'periwinkleGray' : 'white'} mr={8}>
              {card.label}
            </SH6>
            {!card.empty ? (
              <SBox>
                <Icon name="next" size={12} color="white" mt={1} />
              </SBox>
            ) : null}
          </SRow>
        </SBox>
        <SBox flexDirection={flexDirection} justifyContent={justifyContent}>
          {isSmall ? (
            <SCardPercentSmall medium>{card.percent}</SCardPercentSmall>
          ) : (
            <SCardPercent medium>{card.percent}</SCardPercent>
          )}
          <SBox mt={formattedMarginTop}>
            <STextFormatted medium>{card.formatted}</STextFormatted>
          </SBox>
        </SBox>
      </SBox>
    </ToggleStyled>
  );
});