import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6191c26c.js';
import { E as Errors } from './errors-2db24f13.js';
import { D as Dialog } from './dialog-96cc1274.js';
import { a as axios } from './axios-dd6eafb6.js';
import { k as toSnakeCase, j as getMeta, b as alertCodeByStatus } from './helpers-2fce0c0e.js';
import './lang-c70ba3d7.js';

const styleCss$2 = "x-form{display:block;text-align:inherit}x-form-row{position:relative;text-align:inherit;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-0.6rem;margin-left:-0.6rem}x-form-row>.col,x-form-row>[class*=col-]{padding-right:0.6rem;padding-left:0.6rem}x-form-row+hr{margin-top:0.25rem !important}x-form-group{display:block;text-align:inherit;position:relative;margin-bottom:1.2rem}fieldset{margin:0px;padding:0px;border:none;margin-bottom:1rem}fieldset .fieldset-item{margin-bottom:1rem}fieldset .fieldset-item:last-child{margin-bottom:0px}";
const XFormStyle0 = styleCss$2;

const XForm = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.success = createEvent(this, "success", 3);
        this.failed = createEvent(this, "failed", 3);
        this.action = undefined;
        this.acceptCharset = 'UTF-8';
        this.method = 'POST';
        this.autocomplete = 'on';
        this.enctype = 'application/x-www-form-urlencoded';
        this.timeout = 30000;
        this.appendData = {};
        this.appendHeaders = {};
        this.dialogInterval = undefined;
        this.withoutDialog = undefined;
        this.withoutSuccessDialog = undefined;
        this.withoutValidationDialog = undefined;
        this.response = undefined;
        this.submitter = undefined;
    }
    /**
     * Submit event handler
     */
    onSubmit(e) {
        var _a;
        e.preventDefault();
        this.submitter = (_a = e.submitter) === null || _a === void 0 ? void 0 : _a.closest('x-button');
        Errors.setLoading(true);
        this.form.dispatchEvent(new CustomEvent('loading', { bubbles: false, detail: true }));
        this.response = null;
        const data = new FormData(this.form);
        for (const key in this.appendData) {
            data.append(key, this.appendData[key]);
        }
        for (const key in this.form.dataset) {
            data.append(toSnakeCase(key), this.form.dataset[key]);
        }
        if (this.submitter) {
            this.submitter.loading = true;
            this.submitter.disabled = true;
        }
        axios({
            method: this.method,
            url: this.action ? this.action : window.location.href,
            data: data,
            timeout: this.timeout,
            headers: Object.assign(Object.assign({}, this.appendHeaders), { 'Content-Type': this.enctype, 'X-CSRF-TOKEN': getMeta('csrf-token') }),
        }).then((response) => {
            var _a;
            if (this.submitter) {
                this.submitter.loading = false;
                this.submitter.disabled = false;
            }
            this.response = response;
            if (this.withoutDialog || this.withoutSuccessDialog) {
                this.onSuccess(response.data);
            }
            else {
                Dialog.success({
                    message: (_a = response.data) === null || _a === void 0 ? void 0 : _a.message,
                    interval: this.dialogInterval,
                }).then((result) => {
                    result === 'close' && this.onSuccess(response.data);
                });
            }
        }).catch(this.catchError.bind(this));
    }
    /**
     * Catch error
     */
    catchError(err) {
        var _a, _b;
        if (this.submitter) {
            this.submitter.loading = false;
            this.submitter.disabled = false;
        }
        if (err === null || err === void 0 ? void 0 : err.response) {
            this.response = (err === null || err === void 0 ? void 0 : err.response) || null;
            this.alertErrorByStatusCode(err.status, (_b = (_a = err.response) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {});
            this.onFailed(err.response.data);
        }
        else {
            Dialog.exception({ message: err.message });
            this.onFailed(err.message);
        }
    }
    /**
     * Alert error by status code
     */
    alertErrorByStatusCode(status, data) {
        var _a;
        const hasValidationErrors = data === null || data === void 0 ? void 0 : data.errors;
        if (hasValidationErrors) {
            Errors.fill(data.errors);
        }
        if (this.withoutDialog || (this.withoutValidationDialog && hasValidationErrors)) {
            this.onAction(data === null || data === void 0 ? void 0 : data.action);
        }
        else {
            Dialog({
                message: (_a = data === null || data === void 0 ? void 0 : data.message) !== null && _a !== void 0 ? _a : data,
                type: alertCodeByStatus(status),
                interval: this.dialogInterval,
            }).then((result) => {
                result === 'close' && this.onAction(data === null || data === void 0 ? void 0 : data.action);
            });
        }
    }
    /**
     * On action
     */
    onAction(action) {
        if (action === 'reload' || action === 'refresh') {
            Errors.setLoading(true);
            this.form.dispatchEvent(new CustomEvent('loading', { bubbles: false, detail: true }));
            location.reload();
        }
        if (`${action}`.startsWith('redirect:')) {
            Errors.setLoading(true);
            this.form.dispatchEvent(new CustomEvent('loading', { bubbles: false, detail: true }));
            location.href = `${action}`.replace('redirect:', '');
        }
    }
    /**
     * On failed
     */
    onFailed(data) {
        this.failed.emit(data);
        this.form.dispatchEvent(new CustomEvent('failed', { bubbles: false, detail: data }));
        Errors.setLoading(false);
        this.form.dispatchEvent(new CustomEvent('loading', { bubbles: false, detail: false }));
    }
    /**
     * On success
     */
    onSuccess(data) {
        this.success.emit(data);
        this.form.dispatchEvent(new CustomEvent('success', { bubbles: false, detail: data }));
        Errors.setLoading(false);
        this.form.dispatchEvent(new CustomEvent('loading', { bubbles: false, detail: false }));
        if (data === null || data === void 0 ? void 0 : data.action) {
            this.onAction(data.action);
        }
    }
    /**
     * Render the component
     */
    render() {
        return h(Host, { key: '24c7edcc3c7f5cb2507c34902d058d9fc5a1128b' }, h("form", { key: 'b94189e100f3d0f59104f7397dd2db2ae33b7da8', ref: el => this.form = el, "accept-charset": this.acceptCharset, autocomplete: this.autocomplete, enctype: this.enctype, method: this.method, action: this.action, onSubmit: (e) => this.onSubmit(e) }, h("slot", { key: '7a80cb6a2417b52ab63699cca1e41ba80b40be42' })));
    }
    get el() { return getElement(this); }
};
XForm.style = XFormStyle0;

const styleCss$1 = "x-form{display:block;text-align:inherit}x-form-row{position:relative;text-align:inherit;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-0.6rem;margin-left:-0.6rem}x-form-row>.col,x-form-row>[class*=col-]{padding-right:0.6rem;padding-left:0.6rem}x-form-row+hr{margin-top:0.25rem !important}x-form-group{display:block;text-align:inherit;position:relative;margin-bottom:1.2rem}fieldset{margin:0px;padding:0px;border:none;margin-bottom:1rem}fieldset .fieldset-item{margin-bottom:1rem}fieldset .fieldset-item:last-child{margin-bottom:0px}";
const XFormGroupStyle0 = styleCss$1;

const XFormGroup$1 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    /**
     * Render the component
     */
    render() {
        return (h(Host, { key: '59b6f4e260c101031767441ceb42bdcd1297dd6c' }, h("slot", { key: '1fc860c083aa0d86c7d207ece1e4ccfe9b202bc8' })));
    }
};
XFormGroup$1.style = XFormGroupStyle0;

const styleCss = "x-form{display:block;text-align:inherit}x-form-row{position:relative;text-align:inherit;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-0.6rem;margin-left:-0.6rem}x-form-row>.col,x-form-row>[class*=col-]{padding-right:0.6rem;padding-left:0.6rem}x-form-row+hr{margin-top:0.25rem !important}x-form-group{display:block;text-align:inherit;position:relative;margin-bottom:1.2rem}fieldset{margin:0px;padding:0px;border:none;margin-bottom:1rem}fieldset .fieldset-item{margin-bottom:1rem}fieldset .fieldset-item:last-child{margin-bottom:0px}";
const XFormRowStyle0 = styleCss;

const XFormGroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    /**
     * Render the component
     */
    render() {
        return (h(Host, { key: 'ad314ccadd3acb64fc6694245877099f9cc6f697' }, h("slot", { key: 'd39e335083eb569db42b95a42f43b6a69c7ae5c4' })));
    }
};
XFormGroup.style = XFormRowStyle0;

export { XForm as x_form, XFormGroup$1 as x_form_group, XFormGroup as x_form_row };
