<template>
  <div
    class="ivyforms-page-choice-item ivyforms-flex ivyforms-align-items-center ivyforms-border-radius-8 ivyforms-gap-8 ivyforms-py-8 ivyforms-px-12"
  >
    <IvyIcon
      name="drag"
      category="builder"
      type="outline"
      class="ivyforms-page-choice-item__drag-handle"
    />

    <IvyFormItem class="ivyforms-page-choice-item__input ivyforms-flex-1" secondary :error="error">
      <IvyTextInput
        v-model="localLabel"
        :placeholder="placeholder"
        @input="$emit('update:label', localLabel)"
        @blur="$emit('update:label', localLabel)"
      />
    </IvyFormItem>

    <IvyButtonAction
      icon-start="copy"
      priority="tertiary"
      icon-start-type="outline"
      class="ivyforms-page-choice-item__copy-btn ivyforms-flex-shrink-0"
      @click="$emit('copy')"
    />

    <IvyButtonAction
      icon-start="plus-circle"
      priority="secondary"
      type="ghost"
      class="ivyforms-page-choice-item__add-btn ivyforms-flex-shrink-0"
      @click="$emit('add')"
    />

    <IvyButtonAction
      icon-start="minus"
      priority="secondary"
      type="ghost"
      class="ivyforms-page-choice-item__remove-btn"
      :class="[
        'ivyforms-flex-shrink-0',
        { 'ivyforms-page-choice-item__remove-btn--disabled': disabledDelete },
      ]"
      :disabled="disabledDelete"
      @click="$emit('delete')"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import IvyFormItem from '@/views/_components/form/IvyFormItem.vue'
import IvyTextInput from '@/views/_components/input/IvyTextInput.vue'
import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
import IvyIcon from '@/views/_components/icon/IvyIcon.vue'

const props = defineProps({
  id: { type: [String, Number], required: true },
  label: { type: String, default: '' },
  placeholder: { type: String, default: '' },
  disabledDelete: { type: Boolean, default: false },
  error: { type: String, default: '' },
})

defineEmits(['delete', 'add', 'copy', 'update:label'])

const localLabel = ref(props.label)

watch(
  () => props.label,
  (val) => (localLabel.value = val ?? ''),
)
</script>

<style scoped lang="scss">
.ivyforms-page-choice-item {
  border: 1px solid var(--map-base-border-0);
  background: var(--map-base-surface-0);

  &__drag-handle {
    cursor: grab;
    color: var(--map-base-text-1);
  }

  &__input {
    :deep(.el-input) {
      input {
        padding: 6px 10px;
      }
    }
  }

  &__remove-btn--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
</style>
