<template>
  <div
    class="absolute inset-0 pointer-events-none"
    :style="{ opacity: opacity }"
  >
    <div
      class="absolute inset-0"
      :style="{
        backgroundImage: patternSvg,
        maskImage: fade ? 'linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)' : undefined,
        WebkitMaskImage: fade ? 'linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)' : undefined,
      }"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  /** Pattern type */
  pattern: {
    type: String,
    default: 'dots',
    validator: (v) => ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves', 'plaid', 'diagonalPlaid', 'hexagons', 'triangles', 'crosses', 'zigzag', 'diamonds'].includes(v),
  },
  /** Pattern opacity (0-1) */
  opacity: {
    type: Number,
    default: 0.05,
  },
  /** Pattern color - 'auto' will use black in light mode and white in dark mode */
  color: {
    type: String,
    default: 'auto',
  },
  /** Fade pattern at top and bottom edges */
  fade: {
    type: Boolean,
    default: true,
  },
})

// Get color mode for auto color switching
const colorMode = useColorMode()

const patternSvg = computed(() => {
  // Determine the color value based on props and color mode
  let colorValue
  if (props.color === 'auto' || props.color === 'currentColor') {
    // Use white in dark mode, black in light mode
    colorValue = colorMode.value === 'dark' ? 'rgb(255,255,255)' : 'rgb(0,0,0)'
  } else {
    colorValue = props.color
  }
  const color = encodeURIComponent(colorValue)

  const patterns = {
    dots: `url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="10" cy="10" r="1.5" fill="${color}"/%3E%3C/svg%3E')`,

    grid: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0h40v40H0z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,

    diagonal: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 40L40 0M-10 10L10 -10M30 50L50 30" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3C/svg%3E')`,

    topography: `url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 50 Q25 30 50 50 T100 50" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3Cpath d="M0 70 Q25 50 50 70 T100 70" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3Cpath d="M0 30 Q25 10 50 30 T100 30" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,

    circuit: `url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 30h20M40 30h20M30 0v20M30 40v20" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3Ccircle cx="30" cy="30" r="3" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,

    waves: `url('data:image/svg+xml,%3Csvg width="120" height="40" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 20 Q30 0 60 20 T120 20" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,

    plaid: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="40" height="40" fill="none"/%3E%3Cline x1="0" y1="10" x2="40" y2="10" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="0" y1="30" x2="40" y2="30" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="10" y1="0" x2="10" y2="40" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="30" y1="0" x2="30" y2="40" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="0" y1="20" x2="40" y2="20" stroke="${color}" stroke-width="0.25" opacity="0.5"/%3E%3Cline x1="20" y1="0" x2="20" y2="40" stroke="${color}" stroke-width="0.25" opacity="0.5"/%3E%3C/svg%3E')`,

    diagonalPlaid: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0L40 40M-10 30L30 -10M10 50L50 10" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3Cpath d="M40 0L0 40M50 30L10 -10M30 50L-10 10" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3C/svg%3E')`,

    hexagons: `url('data:image/svg+xml,%3Csvg width="56" height="100" viewBox="0 0 56 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M28 0L56 14v28L28 56 0 42V14L28 0zM28 44L56 58v28L28 100 0 86V58L28 44z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,

    triangles: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 40L20 0L40 40Z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,

    crosses: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 15v10M15 20h10" stroke="${color}" stroke-width="0.75" fill="none"/%3E%3C/svg%3E')`,

    zigzag: `url('data:image/svg+xml,%3Csvg width="40" height="20" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 10L10 0L20 10L30 0L40 10" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,

    diamonds: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 0L40 20L20 40L0 20Z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
  }

  return patterns[props.pattern] || patterns.dots
})
</script>
