// src/form.js
(function(global) {
    const { Component, NewState, Util, $, State } = global;

    const AutoForm = {
        customTypes: [],
        register: (name, typeName) => {
            const type = typeName || name
            if (!AutoForm.customTypes.includes(type)) AutoForm.customTypes.push(type)
        }
    };

    Component.register('AutoForm', container => {
        if (!container.state.schema) container.state.schema = []

        const ensureProxy = v => (v && typeof v === 'object' && !v.__isProxy) ? NewState(v) : v;
        container.state.__watch('data', v => container.data = ensureProxy(v));
        container.data = ensureProxy(container.state.data || {});

        container.addEventListener('submit', async (event) => {
            event.preventDefault()
            if (!container.form.reportValidity()) return global.UI?.toast?.('{#verify failed#}', { type: 'danger' })

            container.state.formState = 'submitting'
            const detail = JSON.parse(JSON.stringify(container.data))
            const customEvent = new CustomEvent('submit', { bubbles: false, cancelable: true, detail })
            container.dispatchEvent(customEvent)

            if (customEvent.defaultPrevented) return
            try {
                if (container.state.action) {
                    const resp = await global.HTTP.request({ url: container.state.action, method: 'POST', data: detail })
                    if (!resp.ok) throw new Error(resp.error)
                }
                container.state.formState = 'success'
                if (global.UI?.toast) global.UI.toast('{#submit success#}', { type: 'success' })
            } catch (err) {
                container.state.formState = 'error'
                if (global.UI?.toast) global.UI.toast(err.message, { type: 'danger' })
            }
        })
    }, Util.makeDom(/*html*/`
<form class="auto-form-root" $onsubmit="this.dispatchEvent(new Event('submit'))">
  <div $class="auto-grid-form \${this.state?.grid ? 'row g-3' : ''}">
    <template $each="this.state?.schema" as="field">
      <div $class="\${this.state?.grid ? 'col-md-' + (field.col || 12) : 'mb-3'}">
        <label $if="field.label" class="form-label small fw-bold text-muted mb-1" $text="field.label"></label>
        <div class="field-container">
          <template $if="!field.type || field.type === 'text'">
            <input type="text" class="form-control" $bind="this.data[field.id]" $required="field.required" $placeholder="field.placeholder || ''">
          </template>
          <template $if="field.type === 'textarea'">
            <textarea class="form-control" $bind="this.data[field.id]" $required="field.required" $placeholder="field.placeholder || ''" $rows="field.rows || 3"></textarea>
          </template>
          <template $if="field.type === 'select'">
            <select class="form-select" $bind="this.data[field.id]" $required="field.required">
              <template $each="field.options" as="opt">
                <option $value="typeof opt === 'object' ? opt.value : opt" $text="typeof opt === 'object' ? opt.label : opt"></option>
              </template>
            </select>
          </template>
          <template $if="field.type === 'switch'">
            <div class="form-check form-switch mt-1">
              <input class="form-check-input" type="checkbox" $bind="this.data[field.id]">
            </div>
          </template>
          <template $each="AutoForm.customTypes" as="type">
            <template $if="field.type === type">
              <div $is="type" $.data="this.data[field.id]" $onchange="this.data[field.id] = event.detail"></div>
            </template>
          </template>
        </div>
      </div>
    </template>
  </div>
  <div $if="!this.state?.hideSubmit" class="mt-4 pt-2 border-top d-flex justify-content-end gap-2">
    <button type="button" class="btn btn-light px-4" $if="this.state?.showCancel" $onclick="this.dispatchEvent(new CustomEvent('cancel'))">{#Cancel#}</button>
    <button type="submit" class="btn btn-primary px-4" $disabled="this.state?.formState === 'submitting'">
      <span $if="this.state?.formState === 'submitting'" class="spinner-border spinner-border-sm me-2"></span>
      <span $text="this.state?.submitLabel || '{#Submit#}'"></span>
    </button>
  </div>
</form>
`))

    Component.register('TagsInput', container => {
        container._thisObj = container; 
        if (!container.state) container.state = NewState({ tags: [] })
        container.addEventListener('bind', e => {
            container.state.tags = Array.isArray(e.detail) ? e.detail : []
        })
    }, Util.makeDom(/*html*/`
<div class="form-control d-flex flex-wrap gap-1 align-items-center" style="min-height:38px;cursor:text">
  <template $each="this.state.tags">
    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${Util.getFunctionBody(function (event) {
        if (['Backspace', 'Delete'].includes(event.key)) {
            event.preventDefault()
            this.state.tags.splice(index, 1)
            this.state.tags = this.state.tags
            this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
            Promise.resolve().then(() => {
                const buttons = $$(this, 'button');
                (buttons.length > 0 ? buttons[index > 0 ? index - 1 : 0] : $(this, 'input')).focus()
            })
        }
    })}" $text="item"></button>
  </template>
  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onkeydown="${Util.getFunctionBody(function (event) {
        if (event.isComposing) return
        if (['Enter', ',', ' '].includes(event.key)) {
            event.preventDefault()
            const v = thisNode.value.trim()
            if (v && !this.state.tags.includes(v)) {
                this.state.tags.push(v)
                this.state.tags = this.state.tags
                this.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: this.state.tags }))
            }
            thisNode.value = ''
        }
    })}">
</div>
`), Util.makeDom(/*html*/`<style>TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}</style>`))

    AutoForm.register('TagsInput');

    global.AutoForm = AutoForm;

})(globalThis);