import cx from "../../../../../utils/css/cx.js";
import useA11yOnHover from "../../../../../hooks/useA11yOnHover/index.js";
import classes from './styles.module.scss';
import Line from './Line';
import LineFade from './LineFade';
const cls = cx.merge(classes);
const Lines = function Lines(props) {
  const {
    chartId,
    paths,
    scales,
    range,
    sizes,
    hovering,
    setHover,
    singleMode
  } = props;
  const [hoverHandlers] = useA11yOnHover(e => {
    const fips = e.target.getAttribute('data-fips');
    setHover(fips);
  }, () => {
    setHover(undefined);
  });
  const lineHoverHandlers = singleMode ? undefined : hoverHandlers;
  return <g className={cls('lines')}>
      {paths.map(path => <Line key={path.fips} lineId="bkgnd" chartId={chartId} styles="stroke" size={sizes.background} {...path} />)}

      {paths.map(path => <g key={path.fips}>
          <Line lineId="stroke" chartId={chartId} styles="stroke" size={sizes.stroke} singleMode={singleMode} {...path} />
          <Line className={cls('main-line', {
        hovering
      })} lineId="main" chartId={chartId} styles="solid" size={sizes.line} hoverHandlers={lineHoverHandlers} singleMode={singleMode} {...path} />
          <LineFade chartId={chartId} sizes={sizes} scales={scales} range={range} {...path} />
        </g>)}

    </g>;
};
export default Lines;