import { TooltipTrigger } from "../../../../structure/index.js";
import cx from "../../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const EvShapes = function EvShapes(props) {
  const {
    codes,
    shapeWidth = 16,
    tooltip,
    fipsToPalette,
    getMapFills,
    layout
  } = props;
  const outerWidth = codes.length === 2 ? Math.sqrt(2) * 3 / 2 * shapeWidth : Math.sqrt(2) * 2 * shapeWidth;
  const outerHeight = Math.sqrt(2) * 3 / 2 * shapeWidth;
  const unit = Math.sqrt(2) * shapeWidth;
  const strokeBuffer = 2;
  const getPoints = i => {
    const base = [[0, unit / 2], [unit / 2, 0], [unit, unit / 2], [unit / 2, unit]];
    const offsets = codes.length === 2 ? [[0, 0], [unit / 2, unit / 2]] : [[unit / 2, 0], [0, unit / 2], [unit, unit / 2]];
    const offset = offsets[i];
    return base.map(p => [p[0] + offset[0], p[1] + offset[1]]);
  };
  const formatPoints = ps => ps.map(p => p.toString()).join(' ');
  return <div className={cls('container', layout)} style={{
    minWidth: outerWidth
  }}>
      <div className={classes.shapesContainer}>
        <svg width={outerWidth} height={outerHeight} viewBox={[-1 * strokeBuffer, -1 * strokeBuffer, outerWidth + strokeBuffer * 2, outerHeight + strokeBuffer * 2]}>
          {codes.map((code, i) => <TooltipTrigger key={code} as="g" tooltip={tooltip} props={fipsToPalette.get(code)}>
              <polygon points={formatPoints(getPoints(i))} {...getMapFills({
            code
          })} />
            </TooltipTrigger>)}
          {codes.map((code, i) => <TooltipTrigger key={code} as="g" tooltip={tooltip} props={fipsToPalette.get(code)}>
              <polygon points={formatPoints(getPoints(i))} className={classes.swatch} />
            </TooltipTrigger>)}
        </svg>
      </div>
    </div>;
};
export default EvShapes;