<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Switch } from "../../../../ui/switch";
import { Separator } from "../../../../ui/separator";
import { Field, FieldLabel } from "../../../../ui/field";
import { Locale } from "../../../../ui/locale";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from "../../../../ui/dropdown-menu";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupNumberField
} from "../../../../ui/input-group";
import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
import { Markdown } from "../../../../ui/markdown";
import DerivedValueEditor from "../../../../form/DerivedValueEditor.vue";
import { schema } from "./schema";
defineOptions({ name: "ShwfedTableNumberInputRendererConfig" });
const value = defineModel({ type: Object, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
const ROW_VARS = {
  row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
  index: { type: "number", label: "\u884C\u7D22\u5F15" }
};
const ROUNDING_MODE_OPTIONS = [
  { value: "round", label: "\u56DB\u820D\u4E94\u5165" },
  { value: "floor", label: "\u5411\u4E0B\u53D6\u6574" },
  { value: "ceil", label: "\u5411\u4E0A\u53D6\u6574" }
];
const bindingText = computed({
  get: () => value.value.binding ?? "",
  set: (v) => {
    const trimmed = v.trim();
    if (trimmed === "") {
      const { binding: _drop, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, binding: trimmed };
    }
  }
});
const hiddenModel = computed({
  get: () => value.value.hidden ?? "",
  set: (v) => {
    if (v === "") {
      const { hidden: _drop, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, hidden: v };
    }
  }
});
const disabledModel = computed({
  get: () => value.value.disabled ?? "",
  set: (v) => {
    if (v === "") {
      const { disabled: _drop, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, disabled: v };
    }
  }
});
const readonlyModel = computed({
  get: () => value.value.readonly ?? "",
  set: (v) => {
    if (v === "") {
      const { readonly: _drop, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, readonly: v };
    }
  }
});
const derivedModel = computed({
  get: () => value.value.derived,
  set: (v) => {
    if (v == null) {
      const { derived: _drop, ...rest } = value.value;
      value.value = rest;
    } else {
      value.value = { ...value.value, derived: v };
    }
  }
});
const currentRoundingModeLabel = computed(
  () => ROUNDING_MODE_OPTIONS.find((o) => o.value === (value.value.roundingMode ?? "round"))?.label
);
function onPrecisionChange(v) {
  if (v === void 0) {
    const { precision: _p, roundingMode: _r, ...rest } = value.value;
    value.value = rest;
  } else if (value.value.roundingMode === void 0) {
    value.value = { ...value.value, precision: v, roundingMode: "round" };
  } else {
    value.value = { ...value.value, precision: v };
  }
}
function onRoundingModeChange(mode) {
  value.value = { ...value.value, roundingMode: mode };
}
function onStepChange(v) {
  if (v === void 0 || !(v > 0)) {
    const { step: _drop, ...rest } = value.value;
    value.value = rest;
  } else {
    value.value = { ...value.value, step: v };
  }
}
function onValueAsStringChange(next) {
  if (next) {
    value.value = { ...value.value, valueAsString: true };
  } else {
    const { valueAsString: _drop, ...rest } = value.value;
    value.value = rest;
  }
}
function onMinChange(v) {
  if (v.length > 0) {
    value.value = { ...value.value, min: v };
  } else {
    const { min: _drop, ...rest } = value.value;
    value.value = rest;
  }
}
function onMaxChange(v) {
  if (v.length > 0) {
    value.value = { ...value.value, max: v };
  } else {
    const { max: _drop, ...rest } = value.value;
    value.value = rest;
  }
}
</script>

<template>
  <div class="space-y-5">
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('title')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('title')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("title") }}
        </FieldLabel>
        <Locale
          :model-value="value.title"
          @update:model-value="(v) => value = { ...value, title: v }"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('tooltip')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('tooltip')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("tooltip") }}
        </FieldLabel>
        <Locale
          :model-value="value.tooltip"
          markdown
          @update:model-value="(v) => value = { ...value, tooltip: v }"
        />
      </Field>
    </div>
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('binding')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('binding')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("binding") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            v-model="bindingText"
            placeholder="例：age"
            class="font-mono"
          />
        </InputGroup>
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('placeholder')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('placeholder')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("placeholder") }}
        </FieldLabel>
        <Locale
          :model-value="value.placeholder"
          @update:model-value="(v) => value = { ...value, placeholder: v }"
        />
      </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="value.size"
            :disabled="value.grow"
            :min="0"
            @update:model-value="(v) => value = { ...value, size: v }"
          />
          <InputGroupAddon align="inline-end">
            <InputGroupButton
              :variant="value.grow ? 'primary' : 'ghost'"
              size="xs"
              @click="value = { ...value, grow: !value.grow }"
            >
              <Icon :icon="value.grow ? 'fluent:lock-closed-20-regular' : 'fluent:arrow-autofit-width-20-regular'" />
              {{ fieldTitle("grow") }}
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('precision')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('precision')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("precision") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupNumberField
            :model-value="value.precision"
            :min="0"
            @update:model-value="onPrecisionChange"
          />
          <InputGroupAddon
            v-if="value.precision !== void 0"
            align="inline-end"
          >
            <DropdownMenu>
              <DropdownMenuTrigger as-child>
                <InputGroupButton
                  variant="ghost"
                  class="pr-1.5! text-xs"
                >
                  {{ currentRoundingModeLabel }}
                  <Icon
                    icon="lucide:chevron-down"
                    class="size-3"
                  />
                </InputGroupButton>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem
                  v-for="opt in ROUNDING_MODE_OPTIONS"
                  :key="opt.value"
                  @select="onRoundingModeChange(opt.value)"
                >
                  {{ opt.label }}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </InputGroupAddon>
        </InputGroup>
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('step')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('step')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("step") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupNumberField
            :model-value="value.step"
            :min="0"
            @update:model-value="onStepChange"
          />
        </InputGroup>
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('valueAsString')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('valueAsString')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("valueAsString") }}
        </FieldLabel>
        <div>
          <Switch
            :model-value="value.valueAsString ?? false"
            @update:model-value="onValueAsStringChange"
          />
        </div>
      </Field>
    </div>
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('min')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('min')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("min") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.min ?? ''"
          placeholder="例：0"
          result-type="number"
          class="min-h-10"
          :extra-vars="ROW_VARS"
          @update:model-value="onMinChange"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('max')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('max')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("max") }}
        </FieldLabel>
        <ExpressionEditor
          :model-value="value.max ?? ''"
          placeholder="例：100"
          result-type="number"
          class="min-h-10"
          :extra-vars="ROW_VARS"
          @update:model-value="onMaxChange"
        />
      </Field>
    </div>
    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('hidden')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('hidden')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("hidden") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="hiddenModel"
          placeholder="例：row.archived"
          result-type="bool"
          :extra-vars="ROW_VARS"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('disabled')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('disabled')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("disabled") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="disabledModel"
          placeholder="例：row.locked"
          result-type="bool"
          :extra-vars="ROW_VARS"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('readonly')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('readonly')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("readonly") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="readonlyModel"
          placeholder="例：row.id != null"
          result-type="bool"
          :extra-vars="ROW_VARS"
        />
      </Field>
      <Field
        orientation="vertical"
        class="col-span-2"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('derived')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('derived')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("derived") }}
        </FieldLabel>
        <DerivedValueEditor
          v-model="derivedModel"
          result-type="number"
          placeholder="例：row.unitPrice * row.quantity"
        />
      </Field>
    </div>
    <Separator />
    <div class="flex flex-wrap gap-x-8 gap-y-3">
      <Field
        orientation="vertical"
        class="w-full max-w-xs"
      >
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('enableSorting')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('enableSorting')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("enableSorting") }}
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            :model-value="value.sortKey"
            placeholder="例：created_at"
            @update:model-value="(v) => value = { ...value, sortKey: v || void 0 }"
          />
          <InputGroupAddon align="inline-end">
            <InputGroupButton
              :variant="value.enableSorting ? 'primary' : 'ghost'"
              size="xs"
              @click="value = { ...value, enableSorting: !value.enableSorting }"
            >
              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
              {{ fieldTitle("enableSorting") }}
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </Field>
    </div>
  </div>
</template>
