<template>
  <form
      @submit="handleSubmit"
      @reset="handleReset"
      :class="formClasses"
  >
    <slot />
  </form>
</template>

<script setup>
  import { computed, provide, inject } from 'vue'
  import { CONTROL_SIZE, CONTROL_DISABLED } from "@/util/controls";
  import {useInjectedProp, useSize} from "@/composables/useInjections";

  import {controlProps} from "@/util/controls";

  const props = defineProps({
    ...controlProps,

    disabled: { type: Boolean, required: false, default: undefined },

    serverSide: { type: Boolean, required: false, default: false },
  })

  const emit = defineEmits(['submit', 'reset'])

  const handleSubmit = function(e) {
    if(props.serverSide) return

    emit('submit', e)
    e.preventDefault()
  }

  const handleReset = function(e) {
    emit('reset', e)
  }

  const formSize = useSize(props)
  provide(CONTROL_SIZE, formSize)

  const formDisabled = useInjectedProp(CONTROL_DISABLED, props, 'disabled', undefined)
  provide(CONTROL_DISABLED, formDisabled)


  const formClasses = computed(() => {
    let classes = []
    if(formSize.value) classes.push(formSize.value)
    if(formDisabled.value) classes.push('disabled')
    return classes
  })
</script>
