import { useMemo } from 'react';
import cx from "../../../../utils/css/cx.js";
import { AutoLayout } from "../../../layout/index.js";
import { useCandidateMetadata } from "../../../../hooks/election/index.js";
import { intcomma } from 'journalize';
import getColor from "../../../../utils/colors/getColor.js";
import getElectionPaletteColor from "../../../../utils/colors/getElectionPaletteColor.js";
import classes from './styles.module.scss';
import StateTable from './StateTable';
const cls = cx.merge(classes);
export default function DelegateTooltip({
  candidateId,
  data,
  allDelegatesAwarded
}) {
  const states = useMemo(() => allDelegatesAwarded.filter(({
    id
  }) => id === candidateId), [allDelegatesAwarded, candidateId]);
  const {
    fullName,
    customColor
  } = useCandidateMetadata(candidateId);
  const color = getElectionPaletteColor(customColor, 'main');
  return <AutoLayout gap="1" align="stretch">
      <div className={cls('tooltip-header')}>
        <div className={cls('cand-title')}>
          <div className={cls('cand-dot')} style={{
          '--color': getColor(color)
        }} />
          <span className={cls('cand-label')}>{fullName}</span>
        </div>
        <p className={cls('cand-count')}>
          {`${intcomma(data.candTotal)} delegates`}

        </p>
      </div>
      <StateTable states={states} candidateId={candidateId} />
    </AutoLayout>;
}