<script setup>
import { Schema } from "effect";
import { ColorPicker } from "../../../../ui/color-picker";
import { Field, FieldLabel } from "../../../../ui/field";
import { IconPicker } from "../../../../ui/icon-picker";
import { InputGroup, InputGroupInput, InputGroupNumberField } from "../../../../ui/input-group";
import { Markdown } from "../../../../ui/markdown";
import { Switch } from "../../../../ui/switch";
import {
  getStructFieldDescription,
  getStructFieldTitle,
  schema
} from "./schema";
defineOptions({ name: "ShwfedBlockIconConfig" });
const block = defineModel({ type: null, ...{ required: true } });
defineProps({
  configure: { type: Function, required: false }
});
const blockSchema = schema(() => {
}, Schema.Any);
const fieldTitle = (f) => getStructFieldTitle(blockSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(blockSchema, f);
function setDisplayName(v) {
  const s = String(v ?? "");
  block.value = { ...block.value, displayName: s.length > 0 ? s : void 0 };
}
function setIcon(v) {
  block.value = { ...block.value, icon: v };
}
function setColor(v) {
  block.value = { ...block.value, color: v.trim().length > 0 ? v : void 0 };
}
function setSize(v) {
  block.value = { ...block.value, size: typeof v === "number" && v > 0 ? Math.round(v) : void 0 };
}
function setCircle(v) {
  block.value = { ...block.value, circle: v ? true : void 0 };
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('displayName')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('displayName')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("displayName") }}
      </FieldLabel>
      <InputGroup>
        <InputGroupInput
          :model-value="block.displayName ?? ''"
          placeholder="例：状态图标"
          @update:model-value="setDisplayName"
        />
      </InputGroup>
    </Field>

    <Field orientation="vertical">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('icon')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('icon')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("icon") }}
      </FieldLabel>
      <IconPicker
        :model-value="block.icon"
        @update:model-value="setIcon"
      />
    </Field>

    <div class="grid grid-cols-2 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('color')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('color')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("color") }}
        </FieldLabel>
        <ColorPicker
          :model-value="block.color ?? ''"
          placeholder="#4f46e5"
          @update:model-value="setColor"
        />
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('size')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('size')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("size") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupNumberField
            :model-value="block.size"
            :min="1"
            placeholder="8"
            @update:model-value="(v) => setSize(v)"
          />
        </InputGroup>
      </Field>
    </div>

    <Field orientation="horizontal">
      <FieldLabel class="text-xs text-zinc-500">
        <template
          v-if="fieldDescription('circle')"
          #tooltip
        >
          <Markdown
            :source="fieldDescription('circle')"
            block
            class="prose prose-sm prose-zinc"
          />
        </template>
        {{ fieldTitle("circle") }}
      </FieldLabel>
      <Switch
        :model-value="block.circle ?? false"
        @update:model-value="setCircle"
      />
    </Field>
  </div>
</template>
