/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <fieldset id="fieldset">
        <slot></slot>
    </fieldset>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: stretch;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 2px;
    }
    
    #fieldset {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex: 1;
        box-sizing: border-box;
        padding: 0px;
        margin: 0px;
        background-color: transparent;
        border: none;
    }
    
    :host([align="end"]) #fieldset {
        justify-content: flex-end;
    }
    
    :host([align="center"]) #fieldset {
        justify-content: center;
    }
    
    :host([align="between"]) #fieldset {
        justify-content: space-between;
    }
    
    :host([align="even"]) #fieldset {
        justify-content: space-evenly;
    }
    
    * {
        position: relative;
        box-sizing: border-box;
        margin: 0px;
        font-size: 1em;
    }
    
    ::slotted(*) {
        width: auto;
        margin: 4px;
    }
    
    ::slotted(:not(:first-child)) {
        margin-left: 0px
    }
    
    ::slotted([distance~="right"]) {
        margin-right: auto !important;
    }
    
    ::slotted([distance~="left"]) {
        margin-left: auto !important;
    }
    
`);

const CONFIG_FIELDS = [
    {
        "type": "SimpleSelect",
        "name": "align",
        "label": "Align Content",
        "value": "start",
        "options": {
            "start": "Start",
            "end": "End",
            "center": "Center",
            "between": "Space between",
            "even": "Space evenly"
        }
    },
    {
        "type": "BoolOrLogicInput",
        "name": "enabled",
        "label": "Enabled",
        "value": true
    },
    {
        "type": "BoolOrLogicInput",
        "name": "visible",
        "label": "Visible",
        "value": true
    }
];

/* ======================================================================= */

import CustomElement from "../element/CustomElement.js";
import {deepClone} from "../../util/helper/DeepClone.js";
import {safeSetAttribute} from "../../util/helper/ui/NodeAttributes.js";

export default class FormRow extends CustomElement {

    static get formConfigurationFields() {
        return deepClone(CONFIG_FIELDS);
    }

    static get formConfigurationCanHaveChildren() {
        return true;
    }

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
    }

    set align(value) {
        this.setAttribute("align", value);
    }

    get align() {
        return this.getAttribute("align");
    }

    set stretchContent(value) {
        this.setBooleanAttribute("stretch-content", value);
    }

    get stretchContent() {
        return this.getBooleanAttribute("stretch-content");
    }

    static get observedAttributes() {
        return ["disabled"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case "disabled": {
                if (oldValue != newValue) {
                    safeSetAttribute(this.shadowRoot.getElementById("fieldset"), "disabled", newValue);
                }
            } break;
        }
    }

}

customElements.define("emc-form-row", FormRow);
