<script setup>
import { computed } from "vue";
import { useVModel } from "@vueuse/core";
import { cn } from "../../../utils/cn";
import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group";
defineOptions({ name: "UiColorPicker" });
const props = defineProps({
  defaultValue: { type: String, required: false },
  modelValue: { type: String, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  inputClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  placeholder: { type: String, required: false, default: "#000000" },
  disabled: { type: Boolean, required: false }
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits, {
  passive: true,
  defaultValue: props.defaultValue
});
const safeColor = computed(() => {
  const value = modelValue.value;
  if (typeof value !== "string" || value.length === 0) return void 0;
  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return value;
  return CSS.supports("color", value) ? value : void 0;
});
</script>

<template>
  <InputGroup
    :data-disabled="disabled ? true : void 0"
    :class="cn(props.class)"
  >
    <InputGroupAddon align="inline-start">
      <div
        aria-hidden="true"
        class="size-4 rounded border border-zinc-200 bg-[linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)] bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0]"
      >
        <div
          class="size-full rounded-[3px]"
          :style="{ backgroundColor: safeColor }"
        />
      </div>
    </InputGroupAddon>
    <InputGroupInput
      v-model="modelValue"
      :placeholder="placeholder"
      :disabled="disabled"
      :class="cn('font-mono', inputClass)"
    />
  </InputGroup>
</template>
