import { getStateName } from "../../../../utils/election/index.js";
import cx from "../../../../utils/css/cx.js";
import { useMemo } from 'react';
import { useContainerBreakpointIsAtLeast } from "../../../../hooks/breakpoint/index.js";
import { TooltipTrigger } from "../../../structure/index.js";
import useResizeObserver from "../../../../hooks/useResizeObserver/index.js";
import classes from './styles.module.scss';

// Factor to multiply deligate values by for px
import DelegateFill from './DelegateFill';
const cls = cx.merge(classes);
export default function StateBox({
  tooltip,
  delegate,
  activeCand
}) {
  const {
    total
  } = delegate;
  const isLG = useContainerBreakpointIsAtLeast('lg');
  const [ref, dimensions] = useResizeObserver();
  const [width, height] = dimensions;
  const showLabel = useMemo(() => {
    const maxSize = 24;
    const compare = isLG ? width : height;
    return compare > maxSize;
  }, [isLG, delegate, dimensions]);
  const shouldFade = useMemo(() => {
    if (activeCand) {
      if (delegate.id) return delegate.id !== activeCand;
      return delegate.stateFips !== activeCand;
    }
    return false;
  }, [delegate, activeCand]);
  return <TooltipTrigger className={cls('state-box-container', {
    fade: shouldFade
  })} style={{
    '--size-basis': `${total}%`
  }} tooltip={tooltip} props={{
    delegate
  }}>
      <DelegateFill divRef={ref} candidateId={delegate.id} showLabel={showLabel} stateName={getStateName(delegate.stateFips, {
      format: isLG ? 'abbr' : 'ap_abbr'
    })} tooltip={tooltip} />
    </TooltipTrigger>;
}