<script setup lang="ts">
import 'floating-vue/dist/style.css'
import { ref, computed, PropType } from 'vue'
import MDIcon from '../MDIcon/MDIcon.vue'
import { Dropdown as VDropdown, VClosePopper as vClosePopper } from 'floating-vue'

const props = defineProps({
  /**
   * 選択肢
   * hideFlagがtrueの時optionで選択できない
   * @example p_Options: [
   *{label: "test", value: 'test1', hideFlag: false},
   *{label: "test", value: 'test2', hideFlag: false},
   *{label: "test", value: 'test3', hideFlag: false},
   *]
   */
  p_Options: { type: Array as PropType<{ value: any; label: string }[]>, default: () => [] },
  /**
   * v-modelの値
   * @example modelValue: ''
   */
  modelValue: {
    type: [String, Number] as PropType<string | number | null | undefined>,
    default: '',
  },
  /**
   * タイトル
   * @example p_Title: 'メールアドレス'
   */
  p_Title: { type: String, default: '' },
  /**
   * 制御
   * @example disabled: true
   */
  disabled: { type: Boolean, default: false },
  /**
   * エラー
   * @example p_Error: true
   */
  p_Error: { type: Boolean, default: false },
  /**
   * 外側の要素名
   * @example p_ParentElement: #id
   */
  p_ParentElement: { type: String, default: '._card' },
  /**
   * スモールモード
   * @example p_SmallMode: true
   */
  p_SmallMode: { type: Boolean, default: false },
})

const emit = defineEmits<{
  (e: 'update:modelValue', newVal: any): void
}>()
</script>

<template>
  <VDropdown class="new-dropdown">
    <button>
      {{ p_Options.find((o) => o.value === modelValue)?.label || '選定してください' }}
    </button>
    <template #popper>
      <div class="_options">
        <div
          v-for="option in p_Options"
          :key="option.value"
          v-close-popper
          class="_option"
          @click="() => emit('update:modelValue', option.value)"
        >
          {{ option.label }}
        </div>
      </div>
    </template>
  </VDropdown>
</template>

<style lang="sass">
.v-popper__arrow-container
  display: none
.v-popper__inner
  max-width: 100vw
  padding: 1rem
  background: none !important
  color: #000
  border-radius: 0px !important
  border: none !important
  box-shadow: none !important
</style>
<style lang="sass" scoped>
.new-dropdown
  width: fit-content
._options
  background: white
  max-height: 30vh
  overflow-y: auto
._option
  border: thin solid lightgrey
  padding: 0.5rem
  word-break: break-all
</style>
