import { useMemo } from 'react';
import cx from "../../../../../utils/css/cx.js";
import IfActive from "../../../../application/IfActive/index.js";
import classes from './styles.module.scss';
import Line from '../Lines/Line';
import Point from '../Points/Point';
import Points from '../Points';
import StateLabels from '../StateLabels';
import Label from '../StateLabels/Label';
const cls = cx.merge(classes);
const HoverLayer = function HoverLayer(props) {
  const {
    chartId,
    paths,
    sizes,
    margins,
    scales,
    singleMode,
    hover
  } = props;
  const [activePath, activeMargins] = useMemo(() => [paths.find(p => p.fips === hover), margins.filter(m => m.fips === hover)], [paths, hover]);
  if (!activePath) {
    return null;
  }
  return <g className={cls('hover-overlay')}>
      <g className={cls('faded-layer')}>
        <g className={cls('lines')}>
          {paths.map(path => <Line key={path.fips} lineId="hover-fade" chartId={chartId} styles="stroke" size={sizes.line} {...path} />)}
        </g>

        <Points chartId={chartId} margins={margins} scales={scales} sizes={sizes} white />
        <IfActive active={!singleMode}>
          <StateLabels chartId={chartId} paths={paths} scales={scales} white />
        </IfActive>

      </g>
      <g className={cls('focus-layer')}>
        <Line lineId="hover-stroke" chartId={chartId} size={sizes.stroke} styles="stroke" {...activePath} />
        <Line lineId="hover-main" chartId={chartId} size={sizes.line} {...activePath} />
        <Label chartId={chartId} scales={scales} {...activePath} />

        {activeMargins.map(m => <Point key={`${m.fips}-${m.year}`} chartId={chartId} scales={scales} sizes={sizes} {...m} />)}
      </g>
    </g>;
};
export default HoverLayer;