<script setup>
import { ColorPicker } from "../../../ui/color-picker";
import { Field, FieldGroup, FieldLabel } from "../../../ui/field";
import { IconPicker } from "../../../ui/icon-picker";
import { Locale as LocaleField } from "../../../ui/locale";
import { Markdown } from "../../../ui/markdown";
import { getStructFieldDescription, getStructFieldTitle } from "../../../../share/schema-meta";
import { schema } from "./schema";
defineOptions({ name: "ShwfedAlertOperationConfig" });
const value = defineModel({ type: null, ...{ required: true } });
const opSchema = schema(() => {
});
const fieldTitle = (f) => getStructFieldTitle(opSchema, f) ?? f;
const fieldDescription = (f) => getStructFieldDescription(opSchema, f);
function patch(patchValue) {
  const next = { ...value.value, ...patchValue };
  for (const [k, v] of Object.entries(patchValue)) {
    if (v === void 0) Reflect.deleteProperty(next, k);
  }
  value.value = next;
}
</script>

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

    <div class="grid grid-cols-2 gap-4">
      <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="value.icon ?? ''"
          @update:model-value="(v) => patch(v.trim() === '' ? { icon: void 0 } : { icon: v })"
        />
      </Field>

      <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="value.color ?? ''"
          @update:model-value="(v) => patch(v.trim() === '' ? { color: void 0 } : { color: v })"
        />
      </Field>
    </div>
  </FieldGroup>
</template>
