<script>
import { defineComponent, h, toRef, computed } from 'vue'
import { VColorInput } from 'vuetify/components/VColorInput'
import useNode from '../../composables/use-node.js'
import { useDefaults } from 'vuetify'
import useCompDefaults from '../../composables/use-comp-defaults.js'

export default defineComponent({
  props: {
    modelValue: {
      /** @type import('vue').PropType<import('../../types.js').VjsfColorPickerNode> */
      type: Object,
      required: true
    },
    statefulLayout: {
      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
      type: Object,
      required: true
    }
  },
  setup (props) {
    useDefaults({}, 'VjsfColorPicker')
    const vColorInputDefaults = useCompDefaults('VColorInput', { colorPip: true, hideActions: true })

    const { inputProps, localData, compSlots } = useNode(
      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder'] }
    )

    const fieldProps = computed(() => ({
      ...vColorInputDefaults.value, ...inputProps.value
    }))

    const colorInputProps = computed(() => ({ ...fieldProps.value, modelValue: localData.value }))
    return () => h(VColorInput, colorInputProps.value, compSlots.value)
  }
})

</script>
