<template>
  <div class="ivyforms-page-choice-list ivyforms-flex ivyforms-flex-direction-column">
    <div class="ivyforms-page-choice-list__header ivyforms-flex ivyforms-flex-direction-column">
      <h3 class="ivyforms-page-choice-list__title medium-14">{{ getLabel('page_list') }}</h3>
    </div>

    <IvyScrollbar class="ivyforms-page-choice-list__scrollbar ivyforms-border-radius-8">
      <div class="ivyforms-page-choice-list__items ivyforms-flex ivyforms-flex-direction-column">
        <draggable
          v-model="internalChoices"
          item-key="id"
          handle=".ivyforms-page-choice-item__drag-handle"
          :animation="150"
          class="ivyforms-page-choice-list__draggable ivyforms-flex ivyforms-flex-direction-column"
          @end="onDragEnd"
        >
          <template #item="{ element, index }">
            <IvyPageChoiceItem
              :id="element.id"
              :label="element.label"
              :placeholder="`${getLabel('page')} ${index + 1}`"
              :disabled-delete="internalChoices.length === 1"
              @delete="() => removeOptionAt(index)"
              @add="() => addOptionAt(index)"
              @copy="() => copyOptionAt(index)"
              @update:label="(val) => onUpdateLabel(element.id, val)"
            />
          </template>
        </draggable>
      </div>
    </IvyScrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import draggable from 'vuedraggable'
import IvyScrollbar from '@/views/_components/scrollbar/IvyScrollbar.vue'
import IvyPageChoiceItem from './IvyPageChoiceItem.vue'
import { useLabels } from '@/composables/useLabels.ts'

const { getLabel } = useLabels()

interface Choice {
  id: string
  label?: string
}

const props = withDefaults(
  defineProps<{
    choices: Choice[]
  }>(),
  {
    choices: () => [],
  },
)

const emit = defineEmits<{
  'update:choices': [value: Choice[]]
  'add-page': [index: number]
  'delete-page': [id: string]
  'copy-page': [id: string]
  'update-label': [id: string, label: string]
  reorder: [ids: string[]]
}>()

const internalChoices = ref<Choice[]>([])

// Sync internal choices with props
watch(
  () => props.choices,
  (newChoices) => {
    internalChoices.value = [...newChoices]
  },
  { immediate: true, deep: true },
)

const onUpdateLabel = (id: string, label: string) => {
  const index = internalChoices.value.findIndex((c) => c.id === id)
  if (index !== -1) {
    internalChoices.value[index].label = label
    emit('update:choices', [...internalChoices.value])
    emit('update-label', id, label)
  }
}

const removeOptionAt = (index: number) => {
  const choice = internalChoices.value[index]
  if (internalChoices.value.length > 1 && choice) {
    internalChoices.value.splice(index, 1)
    emit('update:choices', [...internalChoices.value])
    emit('delete-page', choice.id)
  }
}

const addOptionAt = (index: number) => {
  emit('add-page', index)
}

const copyOptionAt = (index: number) => {
  const choice = internalChoices.value[index]
  if (choice) {
    emit('copy-page', choice.id)
  }
}

const onDragEnd = () => {
  emit('update:choices', [...internalChoices.value])
  const ids = internalChoices.value.map((c) => c.id)
  emit('reorder', ids)
}
</script>

<style lang="scss" scoped>
.ivyforms-page-choice-list {
  &__header {
    gap: 16px;
  }

  &__title {
    color: var(--map-base-text-0);
    margin: 0;
  }

  &__scrollbar {
    max-height: 400px;
    border: 1px solid var(--map-base-border-0);
  }

  &__items {
    gap: 8px;
    padding: 8px;
  }

  &__draggable {
    gap: 8px;
  }
}
</style>
