import { FactorObject, vue } from '@factor/api'

const def = vue.defineAsyncComponent

export const inputs = {
  InputEmail: def(() => import('./InputEmail.vue')),
  InputOneTimeCode: def(() => import('./InputOneTimeCode.vue')),
  InputText: def(() => import('./InputText.vue')),
  InputUrl: def(() => import('./InputUrl.vue')),
  InputToggle: def(() => import('./InputToggle.vue')),
  InputCheckbox: def(() => import('./InputCheckbox.vue')),
  InputCheckboxMulti: def(() => import('./InputCheckboxMulti.vue')),
  InputRadio: def(() => import('./InputRadio.vue')),
  InputRadioButton: def(() => import('./InputRadioButton.vue')),
  InputSelect: def(() => import('./InputSelect.vue')),
  InputSelectCustom: def(() => import('./InputSelectCustom.vue')),
  InputSelectMulti: def(() => import('./InputSelectMulti.vue')),
  InputTimezone: def(() => import('./InputTimezone.vue')),
  InputPrice: def(() => import('./InputPrice.vue')),
  InputPhone: def(() => import('./InputPhone.vue')),
  InputSubmit: def(() => import('./InputSubmit.vue')),
  InputPassword: def(() => import('./InputPassword.vue')),
  InputTextarea: def(() => import('./InputTextarea.vue')),
  InputWeight: def(() => import('./InputWeight.vue')),
  InputNumber: def(() => import('./InputNumber.vue')),
  InputMediaUpload: def(() => import('./InputMediaUpload.vue')),
  InputMediaLibrary: def(() => import('./InputMediaLibrary.vue')),
  InputRanking: def(() => import('./InputRanking.vue')),
  InputMultipleChoice: def(() => import('./InputMultipleChoice.vue')),
  InputRating: def(() => import('./InputRating.vue')),
  InputChoice: def(() => import('./InputChoice.vue')),
  InputDate: def(() => import('./InputDate.vue')),
  InputColor: def(() => import('./InputColor.vue')),
  InputFont: def(() => import('./InputFont.vue')),
  InputColorScheme: def(() => import('./InputColorScheme.vue')),
  InputRange: def(() => import('./InputRange.vue')),
  InputDropDown: def(() => import('./InputDropDown.vue')),
  InputMediaEdit: def(() => import('./InputMediaEdit.vue')),
  InputGradient: def(() => import('./InputGradient.vue')),
  InputOverlay: def(() => import('./InputOverlay.vue')),
}

export interface InputOptionSettings {
  label?: string
  description?: string
  subLabel?: string
  placeholder?: string
  key?: string
  input?: keyof typeof inputs | 'title' | 'group'
  isVisible?: boolean
  isRequired?: boolean
  props?: Record<string, unknown>
  options?: InputOption[]
}
export class InputOption extends FactorObject<InputOptionSettings> {
  key = this.settings.key
  input = this.settings.input
  isVisible = this.settings.isVisible || vue.computed(() => true)
  label = this.settings.label
  options = this.settings.options
  props = vue.computed(() => {
    return {
      label: this.settings.label,
      subLabel: this.settings.subLabel,
      description: this.settings.description,
      placeholder: this.settings.placeholder,
      required: this.settings.isRequired,
      key: this.settings.key,
      ...this.settings.props,
    }
  })

  constructor(settings: InputOptionSettings) {
    super('InputOption', settings)
  }
}