<script setup>
import { computed } from "vue";
import { ExpressionEditor } from "../ui/expression-editor";
import { Field, FieldLabel } from "../ui/field";
import { InputGroup, InputGroupInput } from "../ui/input-group";
import { Markdown } from "../ui/markdown";
defineOptions({ name: "ShwfedBlockLayoutEditorMetaStrip" });
const layouts = defineModel({ type: Array, ...{ required: true } });
const props = defineProps({
  index: { type: Number, required: true }
});
const layout = computed(() => layouts.value[props.index]);
function updateName(value) {
  const i = props.index;
  const ls = layouts.value[i];
  if (!ls) return;
  const next = [...layouts.value];
  next[i] = { ...ls, name: value };
  layouts.value = next;
}
function updateMedia(value) {
  const i = props.index;
  const ls = layouts.value[i];
  if (!ls) return;
  const next = [...layouts.value];
  const trimmed = value.trim();
  if (trimmed.length === 0) {
    const { media: _omit, ...rest } = ls;
    next[i] = rest;
  } else {
    next[i] = { ...ls, media: trimmed };
  }
  layouts.value = next;
}
</script>

<template>
  <div
    v-if="layout"
    class="flex flex-col gap-2"
  >
    <div class="grid grid-cols-2 gap-3">
      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template #tooltip>
            <Markdown
              source="编辑器中区分不同布局的内部名称"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          名称
        </FieldLabel>
        <InputGroup>
          <InputGroupInput
            :model-value="layout.name"
            placeholder="未命名布局"
            @update:model-value="(v) => updateName(String(v ?? ''))"
          />
        </InputGroup>
      </Field>

      <Field orientation="vertical">
        <FieldLabel class="text-xs text-zinc-500">
          <template #tooltip>
            <Markdown
              source="返回 `bool` 的 CEL 表达式，挂载时一次性求值；空表示无条件匹配。用 `media('(min-width: 1024px)')` 包装 CSS 媒体查询，可与其他 CEL 表达式组合。"
              block
              class="prose prose-sm prose-zinc"
            />
          </template>
          匹配条件
        </FieldLabel>
        <ExpressionEditor
          :model-value="layout.media ?? ''"
          placeholder="media('(min-width: 1024px)')"
          result-type="bool"
          @update:model-value="(v) => updateMedia(v)"
        />
      </Field>
    </div>
  </div>
</template>
