class Legacy {
    #block;
    root;
    showBase(dom) {
        this.clear(dom);
        dom.classList.add('active');

        Array.from(this.#block.getElementsByClassName('setting')).forEach(element => {
            element.setAttribute('style', 'display:none !important');
        });
        Array.from(this.#block.getElementsByClassName('css-k58djc')).forEach(element => {
            element.style.display = 'none';
        });
        Array.from(this.#block.getElementsByClassName('criteriaIcon')).forEach(element => {
            element.style.display = 'none';
        });
        Array.from(this.#block.getElementsByClassName('description')).forEach(element => {
            element.style.display = 'none';
        });
    }
    showDefault(dom) {
        this.clear(dom);
        dom.classList.add('active');
        Array.from(this.#block.getElementsByClassName('setting')).forEach(element => {
            element.style.display = 'block';
        });
        Array.from(this.#block.getElementsByClassName('css-k58djc')).forEach(element => {
            element.style.display = 'none';
        });
        Array.from(this.#block.getElementsByClassName('criteriaIcon')).forEach(element => {
            element.style.display = '';
        });
        Array.from(this.#block.getElementsByClassName('description')).forEach(element => {
            element.style.display = '';
        });
    }
    showAdvanced(dom) {
        this.clear(dom);
        dom.classList.add('active');
        Array.from(this.#block.getElementsByClassName('setting')).forEach(element => {
            element.style.display = 'block';
        });
        Array.from(this.#block.getElementsByClassName('css-k58djc')).forEach(element => {
            element.style.display = 'inline-flex';
        });
        Array.from(this.#block.getElementsByClassName('criteriaIcon')).forEach(element => {
            element.style.display = '';
        });
        Array.from(this.#block.getElementsByClassName('description')).forEach(element => {
            element.style.display = '';
        });
    }



    addConstraint(btn) {
        const $self = this;
        const parentBlock = btn.parentElement;
        const fieldID = btn.parentNode.getAttribute('data-id'); //f1,f2,f3 ...
        const type = btn.parentNode.getAttribute('data-type');
        const constraint = btn.parentNode.getElementsByTagName('constraint')[0];

        const existingConstraints = constraint.querySelectorAll('.constraint-item');
        const index = existingConstraints.length;


        const constraintDiv = document.createElement('div');
        constraintDiv.classList.add('constraint-item');
        constraintDiv.setAttribute('field', fieldID)


        if (index > 0) {
            const logicSelect = document.createElement('select');
            logicSelect.name = `operator${index}`;
            logicSelect.innerHTML = `
                <option value="AND">AND</option>
                <option value="OR">OR</option>
            `;
            constraintDiv.appendChild(logicSelect);
        }
        if (index > 5) {
            return;
        }
        let inputtype = 'text';
        const ruleSelect = document.createElement('select');
        ruleSelect.name = `rule_${index}`;
        switch (type) {
            case 'number':
                inputtype = 'number';
                ruleSelect.innerHTML = `
                    <option value="=">Is equal to (=)</option>
                    <option value="!=">Is not equal to (!=)</option>
                    <option value=">">Is higher than (>)</option>
                    <option value="<">Is less than (<)</option>
                    <option value=">=">Is more or equal (>=)</option>
                    <option value="<=">Is less or equal (<=)</option>
                `;
                break;
            case 'date':
                inputtype = 'date';
                ruleSelect.innerHTML = `
                    <option value="=">Is equal to (=)</option>
                    <option value="!=">Is not equal to (!=)</option>
                    <option value=">">Is higher than (>)</option>
                    <option value="<">Is less than (<)</option>
                    <option value=">=">Is more or equal (>=)</option>
                    <option value="<=">Is less or equal (<=)</option>
                `;
                break;
            case 'text':
                ruleSelect.innerHTML = `
                    <option value="=">Is equal to</option>
                    <option value="!=">Is not equal to</option>
                    <option value="like">Like</option>
                    <option value="!like">Not like</option>
                    <option value="in">Contains</option>
                    <option value="!in">Does not contain</option>
                `;
                break;
            case 'bool':
                ruleSelect.innerHTML = `
                    <option value="=">Equal (true/false)</option>
                    <option value="!=">Not equal</option>
                `;
                break;
            case 'select':
            case 'multiselect':
            case 'zipcode':
            case 'geoloc':
                ruleSelect.innerHTML = `
                <option value="in">Contains (in)</option>
                <option value="!in">Not contains (!in)</option>
            `;
                break;
            case 'color':
                inputtype = 'color';
                ruleSelect.innerHTML = `
                <option value="in">Contains (in)</option>
                <option value="!in">Not contains (!in)</option>
            `;
                break;
            default:
                ruleSelect.innerHTML = '';
        }


        constraintDiv.appendChild(ruleSelect);


        const valueInput = document.createElement('input');
        valueInput.type = inputtype;
        valueInput.name = `value_${index}`;
        valueInput.placeholder = 'Value';
        constraintDiv.appendChild(valueInput);

        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.innerText = 'Remove';
        removeBtn.onclick = function () {
            $self.removeConstraint(this);
        };
        constraintDiv.appendChild(removeBtn);
        constraint.appendChild(constraintDiv);
        constraint.style.display = 'block';
    }

    collectAllConstraints() {
        const result = {};
        const constraintElements = this.root.querySelectorAll('constraint');

        constraintElements.forEach(constraintEl => {
            const fieldID = constraintEl.closest('.box')?.getAttribute('data-id');
            if (!fieldID) return;

            const expressions = this.parseConstraintItems(constraintEl);
            
            if(!expressions){
                return null;
            }
            if(expressions.indexOf(null) != -1){
                return null;
            }
            if (expressions.length === 1) {
                result[fieldID] = expressions[0];
            } else if (expressions.length > 1) {
                result[fieldID] = this.buildExpressionTree(expressions);
            }
        });

        return { constraints: result };
    }

    parseConstraintItems(constraintEl) {
        const items = Array.from(constraintEl.querySelectorAll('.constraint-item'));

        return items.map((item, index) => {
            const rule = item.querySelector(`select[name^=rule_]`)?.value || '';
            let value = item.querySelector(`input[name^=value_]`)?.value || '';

            if(!value){
                item.querySelector(`input[name^=value_]`).focus();
                item.querySelector(`input[name^=value_]`).style.borderColor = 'red'
                setTimeout(()=>{item.querySelector(`input[name^=value_]`).style.borderColor = '';},1000)
                return null;
            }
            const logicOperator = index > 0
                ? item.querySelector(`select[name^=operator]`)?.value || 'AND'
                : null;
            value = isNaN(value) ? value : parseInt(value);

            if(logicOperator){
                return {
                    operator: logicOperator,
                    rule,
                    value
                };
            }else{
                return {
                    rule,
                    value
                };
            }
           
        });
    }

    buildExpressionTree(items) {
        if (items.length === 1) {
            return {
                rule: items[0].rule,
                value: items[0].value
            };
        }

        const [first, second, ...rest] = items;
        
        const combined = {
            operator: second.operator,
            left: {
                rule: first.rule,
                value: first.value
            },
            right: {
                rule: second.rule,
                value: second.value
            }
        };

        if (rest.length === 0) {
            return combined;
        }

      
        return this._appendRight(combined, rest);
    }

    _appendRight(currentNode, remainingItems) {
        const [next, ...rest] = remainingItems;

        const newRight = {
            operator: next.operator,
            left: currentNode.right,
            right: {
                rule: next.rule,
                value: next.value
            }
        };

        currentNode.right = newRight;

        return rest.length > 0
            ? this._appendRight(currentNode, rest)
            : currentNode;
    }


    removeConstraint(btn) {
        const constraintDiv = btn.parentElement;
        constraintDiv.remove();
    }

    clear(dom) {
        let parent = dom.parentNode;
        Array.from(parent.getElementsByTagName('button')).forEach(element => {
            element.classList.remove('active')
        });
    }

    legacyChange(dom, e) {

        if ((e.target.classList.contains('number')) || (e.target.classList, e.target.tagName == 'path')) {

            return;
        }
        const row = JSON.parse(dom.dataset.json);
        const parent = dom.parentNode.parentNode;
        const source = dom.getElementsByClassName('new-results-item')[0];
        const target = parent.getElementsByClassName('new-results-item')[0];
        target.innerHTML = source.innerHTML;
        target.dataset.id = source.dataset.id;
   
    }

    constructor() {
        this.#block = document.body.getElementsByClassName('application-details')[0];
        this.root = document;
    }
}


document.addEventListener('DOMContentLoaded', function () {
    window.legacy = new Legacy();
    appManager.addInputSource(function(){
        let constraints = window.legacy.collectAllConstraints();
        constraints['constraints'] = JSON.stringify(constraints['constraints']);
        return constraints;
    });
    
});