<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
import { ExpressionEditor } from "../../../../ui/expression-editor";
import { Separator } from "../../../../ui/separator";
import { Field, FieldLabel } from "../../../../ui/field";
import { Locale } from "../../../../ui/locale";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupNumberField
} from "../../../../ui/input-group";
import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
import { Markdown } from "../../../../ui/markdown";
import TriggersField from "../../../../actions/components/triggers-field.vue";
import { schema } from "./schema";
defineOptions({ name: "ShwfedTableComboboxMultiRemoteOptionsRemoteConfig" });
const value = defineModel({ type: null, ...{ 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 ROW_JSON_VARS = {
  ...ROW_VARS,
  json: { type: "dyn", label: "HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09" }
};
const ROW_OPTION_VARS = {
  ...ROW_VARS,
  option: { type: "dyn", label: "\u5F53\u524D\u9009\u9879" }
};
const ROW_VALUE_VARS = {
  ...ROW_VARS,
  value: { type: "dyn", label: "\u7528\u6237\u5F53\u524D\u9009\u4E2D\u9879 `value` \u7EC4\u6210\u7684\u6570\u7EC4\uFF08\u6E05\u7A7A\u65F6\u4E3A\u7A7A\u6570\u7EC4\uFF09" }
};
const JSON_VARS = {
  json: { type: "dyn", label: "HTTP \u54CD\u5E94\u4F53" }
};
function celModel(field) {
  return computed({
    get: () => value.value[field] ?? "",
    set: (v) => {
      if (v === "") {
        const { [field]: _omit, ...rest } = value.value;
        value.value = rest;
      } else {
        value.value = { ...value.value, [field]: v };
      }
    }
  });
}
const hiddenModel = celModel("hidden");
const disabledModel = celModel("disabled");
const readonlyModel = celModel("readonly");
const onChangeModel = celModel("onChange");
const successMessageModel = celModel("successMessage");
const triggers = computed(() => value.value.triggers ?? []);
function updateTriggers(next) {
  if (next.length === 0) {
    const { triggers: _omit, ...rest } = value.value;
    value.value = rest;
  } else {
    value.value = { ...value.value, triggers: [...next] };
  }
}
</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 v-model="value.title" />
      </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
          v-model="value.tooltip"
          markdown
        />
      </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('accessor')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('accessor')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("accessor") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="value.accessor"
          placeholder="如 row.roles"
          result-type="dyn"
          :extra-vars="ROW_VARS"
        />
      </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 v-model="value.placeholder" />
      </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>
    </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('request')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('request')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("request") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="value.request"
          placeholder="如 http.get('/api/roles')"
          result-type="HttpRequest"
          :extra-vars="ROW_VARS"
          multiline
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('options')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('options')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("options") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="value.options"
          placeholder="如 json.data"
          result-type="dyn"
          :extra-vars="ROW_JSON_VARS"
          multiline
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('optionValue')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('optionValue')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("optionValue") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="value.optionValue"
          placeholder="如 option.id"
          result-type="dyn"
          :extra-vars="ROW_OPTION_VARS"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('optionLabel')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('optionLabel')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("optionLabel") }}
        </FieldLabel>
        <Locale
          v-model="value.optionLabel"
          markdown
          translate-hint="combobox option label"
        />
      </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">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('onChange')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('onChange')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("onChange") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="onChangeModel"
          placeholder="如 http.patch('/api/items/' + row.id).body({ roles: value })"
          result-type="HttpRequest"
          :extra-vars="ROW_VALUE_VARS"
          multiline
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('successMessage')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('successMessage')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("successMessage") }}
        </FieldLabel>
        <ExpressionEditor
          v-model="successMessageModel"
          placeholder="如 '已更新'"
          result-type="string"
          :extra-vars="JSON_VARS"
        />
      </Field>
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template
            v-if="fieldDescription('triggers')"
            #tooltip
          >
            <Markdown
              :source="fieldDescription('triggers')"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          {{ fieldTitle("triggers") }}
        </FieldLabel>
        <TriggersField
          :triggers="triggers"
          @update:triggers="updateTriggers"
        />
      </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>
