<template>
  <el-card
    class="mb-12px"
    :body-class="!options.length ? 'hidden' : 'pr-0!'"
    :header-class="!options.length ? 'border-b-none!' : ''"
  >
    <template #header>
      <div class="flex items-center justify-between">
        <span>选项</span>
        <span class="flex gap-4px">
          <LuPlus class="cursor-pointer" size="16px" @click="handleAdd" />
          <LuTrash2 class="cursor-pointer" size="16px" @click="handleClear" />
        </span>
      </div>
    </template>
    <el-scrollbar max-height="160px">
      <el-radio-group v-model="selectedIndex" class="w-full">
        <div
          v-for="(_, index) in options"
          :key="index"
          class="w-full mb-6px flex items-center gap-4px pr-12px"
        >
          <el-radio :value="index" class="mr-0! shrink-0" />
          <LanguageInput
            v-model="options[index]"
            class="flex-1"
            placeholder="输入选项"
          />
          <LuTrash2 class="cursor-pointer shrink-0" size="14px" @click.stop="handleDelete(index)" />
        </div>
      </el-radio-group>
    </el-scrollbar>
  </el-card>
</template>

<script setup lang="ts">
import { computed, watch, type Ref } from 'vue'
import { LuPlus, LuTrash2 } from 'vue-icons-plus/lu'
import LanguageInput from '../components/LanguageInput.vue'

type RollerFormData = {
  props?: {
    options?: string[]
    selected?: number
  }
}

const props = defineProps<{
  values: Ref<RollerFormData | undefined>
}>()

const ensureRollerProps = () => {
  const widget = props.values?.value
  if (!widget) {
    return undefined
  }

  if (!widget.props) {
    widget.props = {}
  }

  if (!Array.isArray(widget.props.options)) {
    widget.props.options = []
  }

  if (typeof widget.props.selected !== 'number') {
    widget.props.selected = 0
  }

  return widget.props
}

const options = computed<string[]>({
  get() {
    return ensureRollerProps()?.options ?? []
  },
  set(list: string[]) {
    const rollerProps = ensureRollerProps()
    if (rollerProps) {
      rollerProps.options = list
    }
  }
})

const selectedIndex = computed<number>({
  get() {
    return ensureRollerProps()?.selected ?? 0
  },
  set(value: number) {
    const rollerProps = ensureRollerProps()
    if (!rollerProps) {
      return
    }

    if (!rollerProps.options?.length) {
      rollerProps.selected = 0
      return
    }

    rollerProps.selected = Math.max(0, Math.min(value, rollerProps.options.length - 1))
  }
})

const normalizeSelected = (nextOptions = options.value) => {
  const rollerProps = ensureRollerProps()
  if (!rollerProps) {
    return
  }

  if (!nextOptions.length) {
    rollerProps.selected = 0
    return
  }

  rollerProps.selected = Math.max(0, Math.min(rollerProps.selected ?? 0, nextOptions.length - 1))
}

watch(
  options,
  (list) => {
    normalizeSelected(list)
  },
  {
    deep: true,
    immediate: true
  }
)

const handleAdd = () => {
  const next = options.value.slice()
  next.push(String(next.length + 1))
  options.value = next
  normalizeSelected(next)
}

const handleDelete = (index: number) => {
  const next = options.value.slice()
  next.splice(index, 1)
  options.value = next
  normalizeSelected(next)
}

const handleClear = () => {
  options.value = []
  selectedIndex.value = 0
}
</script>

<style scoped></style>
