<script setup>
import { computed, inject, onBeforeUnmount, onMounted } from "vue";
import { Icon } from "@iconify/vue";
import { Field, FieldLabel } from "../../../../ui/field";
import { Locale } from "../../../../ui/locale";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupNumberField
} from "../../../../ui/input-group";
import ActionsConfigEditor from "../../../../actions/config.vue";
import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
import { Markdown } from "../../../../ui/markdown";
import { TABLE_COLUMN_LAYOUT_KEY } from "../../../column-layout";
import { registerRowVariables, schema } from "./schema";
defineOptions({ name: "ShwfedTableActionsRendererConfig" });
const value = defineModel({ type: Object, ...{ required: true } });
const fieldSchema = schema(() => {
});
const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
const layout = inject(TABLE_COLUMN_LAYOUT_KEY, null);
onMounted(() => {
  if (layout) layout.fullPane.value = true;
});
onBeforeUnmount(() => {
  if (layout) layout.fullPane.value = false;
});
const actionValue = computed({
  get: () => ({
    kind: "shwfed.component.action",
    size: "sm",
    gap: value.value.gap ?? 4,
    style: value.value.style,
    groups: value.value.groups ?? [],
    items: value.value.items ?? []
  }),
  set: (next) => {
    const { gap, style, groups, items } = next;
    const merged = {
      ...value.value,
      gap,
      groups,
      items
    };
    if (style === void 0) Reflect.deleteProperty(merged, "style");
    else merged.style = style;
    value.value = merged;
  }
});
</script>

<template>
  <ActionsConfigEditor
    v-model="actionValue"
    :configure="registerRowVariables"
  >
    <template #general-extra>
      <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('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.size = v"
          />
          <InputGroupAddon align="inline-end">
            <InputGroupButton
              :variant="value.grow ? 'primary' : 'ghost'"
              size="xs"
              @click="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>
    </template>
  </ActionsConfigEditor>
</template>
