import Card from "../../../structure/Card/index.js";
import ResultsTable from "../../ResultsTable/index.js";
import useResizeObserver from "../../../../hooks/useResizeObserver/index.js";
import classnames from 'classnames';
import { useMemo } from 'react';
import { useIsMobile } from "../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
import sizes from './resultsTableSizes';
const CountyTooltip = function CountyTooltip(props) {
  const {
    code,
    name,
    colors
  } = props;
  const config = colors.fipsToPalette.get(code);
  const [ref, [width]] = useResizeObserver();
  const isMobile = useIsMobile();
  if (!config) return null;

  // Find the size based on the container width
  // Note this is currently just copied directly from the results table
  const resultsTableSize = useMemo(() => sizes.find(step => width < step.max), [width, sizes]);
  return <Card edge="sharp" shadow={isMobile ? '200' : '100'} padding={{
    x: '3',
    y: '2'
  }}>
      <div className={classes.content} ref={ref}>
        <div className={classnames(classes.countyName, classes[resultsTableSize.key])}>
          {name}
        </div>
        <ResultsTable id={config.id} format="condensed" expandable="aggregationOnly" />
      </div>
    </Card>;
};
export default CountyTooltip;