import { IconProps } from "@radix-ui/react-icons/dist/types";
import * as React from "react";

/**
 * Figma-style alignment/distribution glyphs: a 1px alignment edge plus
 * rounded object bars, drawn on the shared 15px icon grid. Used by the
 * inspector's alignment strip (the Radix align icons read as heavier
 * tack-like shapes that clash with the rest of the icon set).
 */

function makeIcon(name: string, children: React.ReactNode) {
  const Component = React.memo(function AlignIcon({
    color = "currentColor",
    ...props
  }: IconProps) {
    return (
      <svg
        width="15"
        height="15"
        viewBox="0 0 15 15"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
      >
        <g fill={color} stroke="none">
          {children}
        </g>
      </svg>
    );
  });
  Component.displayName = name;
  return Component;
}

// Vertical edge = 1x12 rect (crisper than a stroked line); bars 2.5 thick.
const vEdge = (x: number) => (
  <rect x={x} y={1.5} width={1} height={12} rx={0.5} />
);
const hEdge = (y: number) => (
  <rect x={1.5} y={y} width={12} height={1} rx={0.5} />
);
const hBar = (x: number, y: number, width: number) => (
  <rect x={x} y={y} width={width} height={2.5} rx={0.75} />
);
const vBar = (x: number, y: number, height: number) => (
  <rect x={x} y={y} width={2.5} height={height} rx={0.75} />
);

export const AlignObjectsLeftIcon = makeIcon(
  "AlignObjectsLeftIcon",
  <>
    {vEdge(2)}
    {hBar(4.5, 4, 8)}
    {hBar(4.5, 8.5, 5)}
  </>
);

export const AlignObjectsRightIcon = makeIcon(
  "AlignObjectsRightIcon",
  <>
    {vEdge(12)}
    {hBar(2.5, 4, 8)}
    {hBar(5.5, 8.5, 5)}
  </>
);

export const AlignObjectsCenterHorizontalIcon = makeIcon(
  "AlignObjectsCenterHorizontalIcon",
  <>
    <rect x={7} y={1.5} width={1} height={2} rx={0.5} />
    <rect x={7} y={11.5} width={1} height={2} rx={0.5} />
    <rect x={7} y={6.75} width={1} height={1.5} rx={0.5} />
    {hBar(2.5, 4, 10)}
    {hBar(4.5, 8.5, 6)}
  </>
);

export const AlignObjectsTopIcon = makeIcon(
  "AlignObjectsTopIcon",
  <>
    {hEdge(2)}
    {vBar(4, 4.5, 8)}
    {vBar(8.5, 4.5, 5)}
  </>
);

export const AlignObjectsBottomIcon = makeIcon(
  "AlignObjectsBottomIcon",
  <>
    {hEdge(12)}
    {vBar(4, 2.5, 8)}
    {vBar(8.5, 5.5, 5)}
  </>
);

export const AlignObjectsCenterVerticalIcon = makeIcon(
  "AlignObjectsCenterVerticalIcon",
  <>
    <rect x={1.5} y={7} width={2} height={1} rx={0.5} />
    <rect x={11.5} y={7} width={2} height={1} rx={0.5} />
    <rect x={6.75} y={7} width={1.5} height={1} rx={0.5} />
    {vBar(4, 2.5, 10)}
    {vBar(8.5, 4.5, 6)}
  </>
);

export const DistributeHorizontalSpacingIcon = makeIcon(
  "DistributeHorizontalSpacingIcon",
  <>
    {vEdge(2)}
    {vEdge(12)}
    {vBar(6.25, 4, 7)}
  </>
);

export const DistributeVerticalSpacingIcon = makeIcon(
  "DistributeVerticalSpacingIcon",
  <>
    {hEdge(2)}
    {hEdge(12)}
    {hBar(4, 6.25, 7)}
  </>
);