import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { Semidonut } from '../../graph';
import { theme } from '../../app/theme';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { SRow } from '../../common/s-components/layout/s-row';
import { SCol } from '../../common/s-components/layout/s-col';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { TByAgeEntityColorized, TFgBgColors } from '../types';
import { SDominatorPercent } from '../s-components/s-dominator-percent';
import { STextFormatted } from '../s-components/s-text-formatted';

type TProps = {
  byAge: TByAgeEntityColorized;
  colors: TFgBgColors;
};

export const ByAgeCardDominator: React.FC<TProps> = props => {
  const { byAge, colors } = props;

  const dominator = byAge.dominator!;
  const { donutColors } = byAge;

  return (
    <SBox
      width={163}
      height={140}
      borderRadius={8}
      pt={16}
      pl={16}
      pr={12}
      pb={13}
      mr={16}
      bg={colors.bg}
    >
      <SGradientCard
        width={163}
        height={140}
        colors={colors.fg}
        borderRadius={8}
      />
      <SRow justifyContent="space-between">
        <SCol flex={1}>
          <SH6
            color={theme.colors.periwinkleGray}
            lineHeight="15px"
            mt={1}
            mb={57}
            ml={-1}
          >
            {dominator.label}
          </SH6>
          <SDominatorPercent medium pb={4}>
            {dominator.percent}
          </SDominatorPercent>
          <STextFormatted medium>{dominator.formatted}</STextFormatted>
        </SCol>
        <SCol flex={1} mt={-2}>
          <Semidonut
            // total={byAge?.total}
            segments={dominator.graph}
            colors={donutColors}
            variant="small"
            direction="right"
          />
        </SCol>
      </SRow>
    </SBox>
  );
};