<template>
  <div
    class="dropdown text-start"
    :class="{
      'input-group': !floatingLabel,
      'form-floating': floatingLabel,
      'form-filled': !!modelValue,
      empty: !modelValue,
    }"
  >
    <label class="input-group-text" :for="id" v-if="!!label && !floatingLabel">{{ label }}</label>
    <select
      :id="id"
      :value="modelValue"
      class="form-select"
      :class="{ 'form-select-sm': small, 'form-select-lg': large, disabled }"
      :disabled="disabled"
      @change="onItemSelected($event)"
    >
      <option class="default-option-text" :disabled="!modelValue" v-if="!required || !modelValue" :value="''">
        {{ defaultItemText }}
      </option>
      <option
        v-for="(item, ix) of options"
        :key="item.value + '_' + ix"
        :selected="modelValue === item.value"
        :value="item.value"
        class="dropdown-option"
      >
        {{ item.text }}
      </option>
    </select>
    <label :for="id" v-if="!!label && floatingLabel">{{ label }}</label>
  </div>
</template>

<script lang="ts">
import { useIds } from '@/composables';
import { SelectOption } from '@/types/custom-types';
const { getId } = useIds();
</script>

<script setup lang="ts">
import { PropType, computed } from 'vue';

defineOptions({
  inheritAttrs: false,
});
const props = defineProps({
  id: {
    type: String,
    default: () => getId('dropdown'),
  },
  options: {
    type: Array as PropType<SelectOption[]>,
    required: true,
  },
  disabled: Boolean,
  label: String,
  modelValue: [String, Number, Boolean],
  large: Boolean,
  small: Boolean,
  defaultText: {
    type: String,
    default: 'Select None',
  },
  required: Boolean,
  floatingLabel: Boolean,
});
const emit = defineEmits(['update:modelValue']);

const defaultItemText = computed(() => (!!props.modelValue ? 'Select None' : 'Select One'));

const onItemSelected = (e: any) => {
  if (!props.disabled) {
    emit('update:modelValue', e.currentTarget.value);
  }
};
</script>

<style lang="scss">
@import '../../styles/variables';
@import '../../styles/mixins';

.dropdown {
  &:hover:not(.disabled):not(:disabled) {
    cursor: pointer;
  }
  &.input-group,
  &.form-floating {
    .form-select {
      ~ label {
        transform: none;
      }
      &:focus {
        box-shadow: none;
      }
    }
  }
  &.form-floating {
    .form-select {
      padding: 0.25rem 0.75rem 0;
      height: 40px;
      min-height: 40px;
      ~ label {
        top: -8px;
      }
    }
    &.form-filled {
      .form-select ~ label {
        top: -15px;
        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
        opacity: 0.6;
      }
    }
    &.empty {
      .form-select ~ label {
        opacity: 0.8;
      }
    }
  }
  &.empty {
    .form-select {
      font-size: 0.75rem;
      .dropdown-option {
        font-size: 1rem;
      }
    }
  }
  .form-select {
    .default-option-text {
      font-size: 0.75rem;
      opacity: 0.6;
    }
  }
  label.input-group-text {
    @include noTextSelect();
  }
}
</style>
