<template>
  <div>
    <Draggable :list="sections" item-key="label" class="flex flex-col">
      <template #item="{ element: section }">
        <div class="border-b">
          <div class="flex items-center justify-between p-2">
            <div
              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
              @click="section.opened = !section.opened"
            >
              <FeatherIcon
                name="chevron-right"
                class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
                :class="{ 'rotate-90': section.opened }"
              />
              <div v-if="!section.editingLabel">
                {{ __(section.label) || __('Untitled') }}
              </div>
              <div v-else>
                <Input
                  v-model="section.label"
                  @keydown.enter="section.editingLabel = false"
                  @blur="section.editingLabel = false"
                  @click.stop
                />
              </div>
            </div>
            <div>
              <Button
                :icon="section.editingLabel ? 'check' : 'edit'"
                variant="ghost"
                @click="section.editingLabel = !section.editingLabel"
              />
              <Button
                v-if="section.editable !== false"
                icon="x"
                variant="ghost"
                @click="sections.splice(sections.indexOf(section), 1)"
              />
            </div>
          </div>
          <div v-show="section.opened" class="p-4 pt-0 pb-2">
            <Draggable
              :list="section.fields"
              item-key="label"
              class="flex flex-col gap-1"
              handle=".cursor-grab"
            >
              <template #item="{ element: field }">
                <div
                  class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
                >
                  <div class="flex items-center gap-2">
                    <DragVerticalIcon class="h-3.5 cursor-grab" />
                    <div>{{ field.label }}</div>
                  </div>
                  <div>
                    <Button
                      variant="ghost"
                      icon="x"
                      @click="
                        section.fields.splice(section.fields.indexOf(field), 1)
                      "
                    />
                  </div>
                </div>
              </template>
            </Draggable>
            <Button
              v-if="section.editable !== false"
              class="w-full mt-2"
              variant="outline"
              :label="__('Add Field')"
              @click="section.fields.push({ label: 'New Field' })"
            />
            <div
              v-else
              class="flex justify-center items-center border rounded border-dashed p-3"
            >
              <div class="text-sm text-gray-500">
                {{ __('This section is not editable') }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </Draggable>
    <div class="p-2">
      <Button
        class="w-full"
        variant="outline"
        :label="__('Add Section')"
        @click="
          sections.push({ label: 'New Section', opened: true, fields: [] })
        "
      />
    </div>
  </div>
</template>
<script setup>
import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
import Draggable from 'vuedraggable'
import { Input } from 'frappe-ui'

const props = defineProps({
  sections: Object,
})
</script>
