<template>
  <component v-bind="getBindValue.bind" v-on="getBindValue.on"></component>
</template>
<script>
import ApiSelect from './ApiSelect.vue'
import Select from './Select.vue'
import Calendar from './Calendar.vue'
import Input from './Input.vue'
import { upperFirst, kebabCase } from 'lodash-es'
export default {
  props: {
    schema: {
      type: Object,
      default: () => {},
    },
    setFormModel: {
      type: Function,
      default: () => {},
    },
    formModel: {
      type: Object,
      default: () => {},
    },
    formActionType: {
      type: Object,
      default: () => {},
    },
    isOpen: {
      type: Boolean,
    },
  },
  components: {
    ApiSelect,
    Select,
    Calendar,
    Input,
  },
  created() {
    // this.fetch()
  },
  computed: {
    getValues() {
      const { allDefaultValues, formModel, schema } = this
      // const { mergeDynamicData } = props.formProps
      return {
        field: schema.field,
        model: formModel,
        values: {
          // ...mergeDynamicData,
          // ...allDefaultValues,
          ...formModel,
        },
        schema: schema,
      }
    },
    getComponentsProps() {
      const { schema, formModel, formActionType } = this
      let { componentProps = {} } = schema
      if (this.isFunction(componentProps)) {
        componentProps =
          componentProps({ schema, formModel, formActionType }) ?? {}
      }
      return componentProps
    },
    getBindValue() {
      const {
        component,
        field,
        changeEvent = 'change',
        valueField,
        label,
      } = this.schema

      const eventKey = `on${upperFirst(changeEvent)}`

      const on = {
        [eventKey]: (value) => {
          this.setFormModel(field, value)
        },
        ['onCloseDropdown']: () => {
          this.$emit('close-dropdown')
        },
      }

      const propsData = {
        ...this.getComponentsProps,
        label,
      }

      propsData.codeField = field
      propsData.formValues = this.getValues

      const bindValue = {
        [valueField || 'value']: this.formModel[field],
      }

      const originalObject = {
        is: component,
        ...propsData,
        ...bindValue,
        ...on,
        isOpen: this.isOpen,
      }
      const onEventsObject = {}
      const bindObject = {}
      for (const key in originalObject) {
        if (key.startsWith('on') && typeof originalObject[key] === 'function') {
          const newKey = kebabCase(key.replace('on', ''))
          onEventsObject[newKey] = originalObject[key]
        } else {
          bindObject[key] = originalObject[key]
        }
      }
      return {
        bind: bindObject,
        on: onEventsObject,
      }
    },
  },
  methods: {
    isFunction(obj) {
      return typeof obj === 'function' && obj !== null
    },
    fetch() {
      const { formModel, schema } = this
      let { componentProps = {}, components } = schema
      if (this.isFunction(componentProps)) {
        componentProps = componentProps({ schema, formModel })
      }

      if (components === 'ApiSelect') {
        const { api } = componentProps
        if (!api || !this.isFunction(api)) return
        try {
        } catch (error) {}
      } else if (conponents === 'Select') {
      }
      console.log(this.schema)
    },
  },
}
</script>
