import React, { memo } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { Semidonut } from '../../graph';
import { SRow } from '../../common/s-components/layout/s-row';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { Icon } from '../../common/components/icon';
import { ToggleStyled } from '../../common/components/toggle-styled';
import { GENDER_HEIGHT } from '../constants';
import { onGenderTilePress } from '../../analytics';
import { TAmplitudeDemographicsOptions } from '../types';
import { fp as _ } from '../../common/utils/fp';

type TProps = {
  card: any;
  donutColors: any;
  onPressCard: (variant: string) => void;
  amplitudeParams: TAmplitudeDemographicsOptions;
};

export const ByGenderCardDominator: React.FC<TProps> = memo(props => {
  const { card, donutColors, onPressCard, amplitudeParams } = props;
  const { id, name, isrc, vendor } = amplitudeParams;
  const cssRules = {
    pl: 16,
    pr: 8,
    width: 0.5,
  };

  return (
    <ToggleStyled
      testID="gender-card-dominator-toggle"
      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),
          });
        }
      }}
      {...cssRules}
      shadowHeight={GENDER_HEIGHT}
      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}
    >
      <SBox flex={1} position="relative">
        <SBox px={16} py={14}>
          <SBox mb={30}>
            <SRow>
              <SH6 mr={9}>{card.label}</SH6>
              <Icon name="next" size={12} color="white" />
            </SRow>
          </SBox>
          <Semidonut
            total={card.value}
            segments={card.graph}
            colors={donutColors}
          />
        </SBox>
      </SBox>
    </ToggleStyled>
  );
});