<script lang="ts">
  import type { ImageProps } from "../../types/components/image";

  interface ClipPathProps {
    shape: ImageProps["mask_shape"];
    width: number;
    height: number;
  }

  const { shape, width, height }: ClipPathProps = $props();

  const [topLeft, topRight, bottomRight, bottomLeft] = $derived.by(() => {
    if (shape?.type !== "rectangle") {
      return [0, 0, 0, 0];
    }

    const { corners } = shape;
    return [
      corners?.top_leading ?? 0,
      corners?.top_trailing ?? 0,
      corners?.bottom_trailing ?? 0,
      corners?.bottom_leading ?? 0,
    ];
  });
</script>

{#if shape?.type === "circle"}
  <circle cx={width / 2} cy={height / 2} r={Math.min(width, height) / 2} />
{/if}

{#if shape?.type === "concave"}
  <path
    d={`M 0 0 L ${width} 0 L ${width}  ${height} Q ${width / 2} ${height - 54} 0 ${height} Z`}
  />
{/if}
{#if shape?.type === "convex"}
  <path
    d={`M 0 0 L ${width} 0 L ${width} ${height - 27} Q ${width / 2} ${height + 27} 0 ${height - 27} Z`}
  />
{/if}

{#if shape?.type === "rectangle" || shape?.type === undefined}
  <path
    d={`M ${topLeft} 0 H ${width - topRight} A ${topRight} ${topRight} 0 0 1 ${width} ${topRight}
        V ${height - bottomRight} A ${bottomRight} ${bottomRight} 0 0 1 ${width - bottomRight} ${height}
        H ${bottomLeft} A ${bottomLeft} ${bottomLeft} 0 0 1 0 ${height - bottomLeft}
        V ${topLeft} A ${topLeft} ${topLeft} 0 0 1 ${topLeft} 0 Z`}
  />
{/if}
