<script setup lang="ts">
import Sheet from "./ui/sheet/Sheet.vue";
import SheetContent from "./ui/sheet/SheetContent.vue";
import SheetHeader from "./ui/sheet/SheetHeader.vue";
import SheetTitle from "./ui/sheet/SheetTitle.vue";
import SheetDescription from "./ui/sheet/SheetDescription.vue";
import SheetFooter from "./ui/sheet/SheetFooter.vue";
import Button from "./ui/Button.vue";
import DynamicField from "./DynamicField.vue";
import { useTranslations } from "../composables/useTranslations";
import type { FieldDefinition } from "./fields/types";

const { t } = useTranslations();

const open = defineModel<boolean>("open", { required: true });

const props = defineProps<{
  editableFields: FieldDefinition[];
  bulkEditForm: Record<string, unknown>;
  selectionCount: number;
}>();

const emit = defineEmits<{
  (e: "update:bulkEditForm", key: string, value: unknown): void;
  (e: "save"): void;
}>();
</script>

<template>
  <Sheet v-model:open="open">
    <SheetContent side="right" class="flex flex-col p-0">
      <SheetHeader class="border-b px-6 py-5">
        <SheetTitle>{{ t("builder.resources.edit") }}</SheetTitle>
        <SheetDescription>
          {{ t("builder.resources.selected", { count: props.selectionCount }) }}
        </SheetDescription>
      </SheetHeader>

      <div class="flex-1 space-y-6 overflow-y-auto px-6 py-6">
        <DynamicField
          v-for="field in props.editableFields"
          :key="field.name"
          :field="field"
          :model-value="props.bulkEditForm[field.name]"
          @update:model-value="emit('update:bulkEditForm', field.name, $event)"
        />
      </div>

      <SheetFooter class="border-t px-6 py-4">
        <Button variant="outline" class="mr-auto" @click="open = false">
          {{ t("builder.resources.cancel") }}
        </Button>
        <Button @click="emit('save')">
          {{ t("builder.resources.save") }}
        </Button>
      </SheetFooter>
    </SheetContent>
  </Sheet>
</template>
