import {
  defineComponent, onMounted, type PropType, ref, computed,
} from 'vue'

import './styles.scss'

export interface BooleanSelectExposed {
  isActive: boolean
}

export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<boolean|undefined>,
      default: undefined,
    },
    title: {
      type: String,
    },
    placeholder: {
      type: String,
    },
    onValueChange: {
      type: Function as PropType<(value: boolean|undefined) => void>,
      required: true,
    },
    resetable: {
      type: Boolean,
      default: true,
    },
    errors: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
  },

  setup(props, app) {
    const isActive = ref(false)
    const value = computed(() => props.modelValue as boolean|undefined)
    const valueName = computed(() => {
      if (value.value === true) return 'Да'
      if (value.value === false) return 'Нет'
      return ''
    })

    const select = (item: boolean) => {
      if (props.onValueChange) props.onValueChange(item)
      isActive.value = false
    }

    const deselect = () => {
      if (props.onValueChange) props.onValueChange(undefined)
      isActive.value = false
    }

    const toggleItem = (item: boolean) => {
      if (value.value === item) {
        select(item)
      } else {
        deselect()
      }
    }

    onMounted(() => {
      document.addEventListener('click', () => {
        isActive.value = false
      })
    })

    app.expose({ isActive })

    return () => (
      <div class={`ark-ui-select-wrapper ${props.errors.length > 0 ? 'has-errors' : ''}`}>
        { props.title && <div class="ark-ui-select-title">{ props.title }</div> }
        <div
          class={`ark-ui-select ${value.value ? 'is-selected' : ''} ${isActive.value ? 'is-opened' : ''}`}
          onClick={(event: Event) => event.stopPropagation()}
        >
          <div class="ark-ui-select-head" onClick={() => { isActive.value = !isActive.value }}>
            <input type="text" value={valueName} placeholder={props.placeholder}/>
            <div class="ark-ui-select-head-controls">
              { props.resetable && value.value && <div class="ark-ui-select-clear"/> }
              <div class="ark-ui-select-arrow"/>
            </div>
          </div>
          <div
            class="ark-ui-select-dropdown"
            style={isActive.value ? 'display: block;' : 'display: none;'}>
            <div class="ark-ui-select-items-list">
              <div
                class={value.value === true ? 'ark-ui-select-item is-selected' : 'ark-ui-select-item'}
                onClick={() => toggleItem(true)}
              >
                  Да
              </div>
              <div
                class={value.value === false ? 'ark-ui-select-item is-selected' : 'ark-ui-select-item'}
                onClick={() => toggleItem(false)}
              >
                  Нет
              </div>
            </div>
          </div>
        </div>
        { props.errors.map((error) => (
          <div class="ark-ui-select-error">{error}</div>
        )) }
      </div>
    )
  },
})