<template>
  <div
    class="ivyforms-choice-list-options ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-16"
  >
    <IvyFormItem v-if="selectTypes.includes(field.type)">
      <IvyRadioGroup :model-value="field.type" @change="onChoiceTypeChange">
        <IvyRadio value="select" priority="secondary">{{ getLabel('single_choice') }}</IvyRadio>
        <IvyRadio value="multi-select" priority="secondary">{{
          getLabel('multiple_choice')
        }}</IvyRadio>
      </IvyRadioGroup>
    </IvyFormItem>
    <IvyChoiceList
      :choices="resolvedChoices"
      :show-values="field.showValues"
      :shuffle-options="field.shuffleOptions"
      :enable-search="field.enableSearch"
      :selection-mode="getSelectionMode(field.type)"
      :can-shuffle="canShuffle(field.type)"
      :can-search="canSearch(field.type)"
      :can-clear-selection="canClearSelection(field.type)"
      :default-label="getDefaultLabel(field.type)"
      :default-value-prefix="getDefaultValuePrefix(field.type)"
      @update:choices="updateField('fieldOptions', $event)"
      @update:show-values="updateField('showValues', $event)"
      @update:shuffle-options="updateField('shuffleOptions', $event)"
      @update:enable-search="updateField('enableSearch', $event)"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Field } from '@/types/field'
import IvyFormItem from '@/views/_components/form/IvyFormItem.vue'
import IvyRadioGroup from '@/views/_components/radio/IvyRadioGroup.vue'
import IvyRadio from '@/views/_components/radio/IvyRadio.vue'
import IvyChoiceList from '@/views/_components/choice/IvyChoiceList.vue'

interface Props {
  field: Field
  updateField: (key: string, value: unknown) => void
  getLabel: (key: string) => string
}

const props = defineProps<Props>()

const selectTypes = ['select', 'multi-select']
const resolvedChoices = computed(() => {
  if (Array.isArray(props.field.fieldOptions)) {
    return props.field.fieldOptions
  }

  const legacyOptions = (props.field as Field & { options?: unknown }).options
  return Array.isArray(legacyOptions) ? legacyOptions : []
})

function onChoiceTypeChange(val: string) {
  props.updateField('type', val)
}

// Determine selection mode based on field type
function getSelectionMode(fieldType: string): 'single' | 'multiple' {
  return fieldType === 'checkbox' || fieldType === 'multi-select' ? 'multiple' : 'single'
}

// Determine if shuffle option should be shown
function canShuffle(fieldType: string): boolean {
  // All field types can shuffle except rating
  return fieldType !== 'rating'
}

// Determine if search option should be shown
function canSearch(fieldType: string): boolean {
  // Only select and multi-select can search
  return fieldType === 'select' || fieldType === 'multi-select'
}

// Determine if clear selection button should be shown
function canClearSelection(fieldType: string): boolean {
  // All single-selection types can clear (radio, select, rating)
  return fieldType === 'radio' || fieldType === 'select' || fieldType === 'rating'
}

// Get the default label for new options based on field type
function getDefaultLabel(fieldType: string): string {
  if (fieldType === 'checkbox') {
    return 'Choice'
  }
  return 'Option'
}

// Get the default value prefix for new options based on field type
function getDefaultValuePrefix(fieldType: string): string {
  if (fieldType === 'checkbox') {
    return 'choice'
  }
  return 'option'
}
</script>

<style scoped lang="scss">
.ivyforms-choice-list-options {
  :deep(.ivyforms-form-item),
  :deep(.el-form-item) {
    margin-bottom: 0;
    gap: var(--Spacing-xs, 6px);
  }
  :deep(.el-radio-group.ivyforms-radio-group) {
    padding: 0;
  }
  :deep(.ivyforms-form-item .el-form-item .el-form-item__label) {
    display: none;
  }
}
</style>
