class FormGenerator{
    constructor(formClassName = null){
        this.fieldType = null;
        this.totalField = 0;
        if (this.formClassName) {
            this.formClassName = '.'+formClassName;
        }else{
            this.formClassName = '.generate-form';
        }
    }

    extraFields(fieldType){
        this.fieldType = fieldType;
        var addNew = '';
        if (this.fieldType == 'file') {
            var field = `<select class="select2-multi-select form--control md-style" name="extensions" multiple>
                <option value="jpg">JPG</option>
                <option value="jpeg">JPEG</option>
                <option value="png">PNG</option>
                <option value="pdf">PDF</option>
                <option value="doc">DOC</option>
                <option value="docx">DOCX</option>
                <option value="txt">TXT</option>
                <option value="xlx">XLX</option>
                <option value="xlsx">XLSX</option>
                <option value="csv">CSV</option>
            </select>`;
            var title = `File Extensions <small class="text--danger">*</small>`;
        }else{
            var field = `<input type="text" name="options[]" class="form--control md-style" required>`;
            addNew = `<button type="button" class="btn btn--sm btn--secondary addOption"><i class="las la-plus me-0"></i></button>`;
            var title = `Add Options`;
        }

        var html = `
            <div class="d-flex justify-content-between flex-wrap">
                <label class="form--label style-two">${title}</label>
                ${addNew}
            </div>
            <div class="options mt-2">
                <div class="form-group">
                    <div class="input-group">
                        ${field}
                    </div>
                </div>
            </div>
        `;
        if(
            this.fieldType == 'text' ||
            this.fieldType == 'textarea' ||
            this.fieldType == 'email' ||
            this.fieldType == 'url' ||
            this.fieldType == 'number' ||
            this.fieldType == 'datetime' ||
            this.fieldType == 'date' ||
            this.fieldType == 'time' ||
            this.fieldType == '')
        {
            html = '';
        }

        return html;
    }

    addOptions(){
        return `
            <div class="form-group">
                <div class="input-group">
                    <input type="text" name="options[]" class="form-control form--control md-style" required>
                    <button type="button" class="input-group-text removeOption"><i class="las la-times"></i></button>
                </div>
            </div>
        `;
    }

    formsToJson(form){
        var extensions = null;
        var options = [];
        this.fieldType = form.find('[name=form_type]').val();
        if(this.fieldType == 'file'){
            extensions = form.find('[name=extensions]').val();
        }

        if(this.fieldType == 'select' || this.fieldType == 'checkbox' || this.fieldType == 'radio'){
            var options = $("[name='options[]']").map(function(){return $(this).val();}).get();
        }
        var formItem = {
            type:this.fieldType,
            is_required:form.find('[name=is_required]').val(),
            label:form.find('[name=form_label]').val(),
            instruction:form.find('[name=instruction]').val(),
            extensions:extensions,
            options:options,
            width:form.find('[name=form_width]').val(),
            old_id:form.find('[name=update_id]').val()
        };
        return formItem;
    }

    makeFormHtml(formItem,updateId){
        if (formItem.old_id) {
            updateId = formItem.old_id;
        }
        var hiddenFields = `
            <input type="hidden" name="form_generator[is_required][]" value="${formItem.is_required}">
            <input type="hidden" name="form_generator[extensions][]" value="${formItem.extensions}">
            <input type="hidden" name="form_generator[options][]" value="${formItem.options}">
            <input type="hidden" name="form_generator[form_width][]" value="${formItem.width}">
            <input type="hidden" name="form_generator[form_label][]" value="${formItem.label}">
            <input type="hidden" name="form_generator[form_type][]" value="${formItem.type}">
            <input type="hidden" name="form_generator[instruction][]" value="${formItem.instruction}">
        `;
        var formsHtml = `
            ${hiddenFields}
            <div class="form-field">
                <div class="form-field__item d-flex align-items-center gap-2">
                    <div class="me-1">
                        <i class="las la-braille"></i>
                    </div>
                    <div>
                        <p class="title">Name</p>
                        <p class="value">${formItem.label}</p>
                    </div>
                </div>
                <div class="form-field__item">
                    <p class="title">Type</p>
                    <p class="value">${formItem.type}</p>
                </div>
                <div class="form-field__item">
                    <p class="title">Width</p>
                    <p class="value">${formItem.width == '12' ? '100%' : formItem.width == '6' ? '50%' : formItem.width == '4' ? '33%' : '25%'}</p>
                </div>
                <div class="form-field__item">
                    <p class="value">
                        ${formItem.is_required == 'required' ? '<span class="badge badge--success">Required</span>' : '<span class="badge badge--dark">Optional</span>'}
                    </p>
                </div>
                <div class="form-field__item">
                    <div class="flex-end gap-4">
                        <button type="button" class="editFormData" data-form_item='${JSON.stringify(formItem)}' data-update_id="${updateId}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                                <g clip-path="url(#clip0_3274_324)">
                                    <path opacity="0.2" d="M15.3359 9.3751L10.9609 5.0001L13.2781 2.68291C13.3953 2.56579 13.5542 2.5 13.7199 2.5C13.8856 2.5 14.0445 2.56579 14.1617 2.68291L17.6531 6.17198C17.7702 6.28917 17.836 6.44808 17.836 6.61377C17.836 6.77946 17.7702 6.93837 17.6531 7.05557L15.3359 9.3751Z" fill="currentColor" />
                                    <path d="M7.57734 16.8751H4.08594C3.92018 16.8751 3.76121 16.8093 3.644 16.692C3.52679 16.5748 3.46094 16.4159 3.46094 16.2501V12.7587C3.46101 12.5932 3.52676 12.4344 3.64375 12.3173L13.2781 2.68291C13.3953 2.56579 13.5542 2.5 13.7199 2.5C13.8856 2.5 14.0445 2.56579 14.1617 2.68291L17.6531 6.17198C17.7702 6.28917 17.836 6.44808 17.836 6.61377C17.836 6.77946 17.7702 6.93837 17.6531 7.05557L8.01875 16.6923C7.90163 16.8093 7.74288 16.875 7.57734 16.8751Z" stroke="currentColor"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M10.9609 5L15.3359 9.375" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_3274_324">
                                        <rect width="20" height="20" fill="white" transform="translate(0.335938)" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </button>
                        <button type="button" class="removeFormData">
                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                                <g clip-path="url(#clip0_1458_26667)">
                                    <path opacity="0.2" d="M17.1875 4.8125V17.875C17.1875 18.0573 17.1151 18.2322 16.9861 18.3611C16.8572 18.4901 16.6823 18.5625 16.5 18.5625H5.5C5.31766 18.5625 5.1428 18.4901 5.01386 18.3611C4.88493 18.2322 4.8125 18.0573 4.8125 17.875V4.8125H17.1875Z" fill="currentColor" />
                                    <path d="M18.5625 4.8125H3.4375" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8.9375 8.9375V14.4375" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M13.0625 8.9375V14.4375" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M17.1875 4.8125V17.875C17.1875 18.0573 17.1151 18.2322 16.9861 18.3611C16.8572 18.4901 16.6823 18.5625 16.5 18.5625H5.5C5.31766 18.5625 5.1428 18.4901 5.01386 18.3611C4.88493 18.2322 4.8125 18.0573 4.8125 17.875V4.8125" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M14.4375 4.8125V3.4375C14.4375 3.07283 14.2926 2.72309 14.0348 2.46523C13.7769 2.20737 13.4272 2.0625 13.0625 2.0625H8.9375C8.57283 2.0625 8.22309 2.20737 7.96523 2.46523C7.70737 2.72309 7.5625 3.07283 7.5625 3.4375V4.8125" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_1458_26667">
                                        <rect width="22" height="22" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        `;
        var html = `
            <div class="form-field-wrapper" id="${updateId}">
                ${formsHtml}
            </div>
        `;
    
        if(formItem.old_id){
            html = formsHtml;
            $(`#${formItem.old_id}`).html(html);
        }else{
            $('.addedField').append(html);
        }
    }

    formEdit(element){
        this.showModal()
        var formItem = element.data('form_item');
        var form = $(this.formClassName);
        form.find('[name=form_type]').val(formItem.type).change();
        form.find('[name=form_width]').val(formItem.width).change();
        form.find('[name=is_required]').val(formItem.is_required).change();
        form.find('[name=form_label]').val(formItem.label);
        form.find('[name=instruction]').val(formItem.instruction);
        form.find('[name=update_id]').val(element.data('update_id'))
        var html = '';
        if (formItem.type == 'file') {
            html += `
                <div class="d-flex justify-content-between flex-wrap">
                    <label class="form--label style-two">File Extensions <small class="text--danger">*</small></label>
                </div>
                <div class="mt-2">
                    <div class="form-group">
                        <select class="select2-multi-select form--control md-style" name="extensions" multiple>
                            <option value="jpg">JPG</option>
                            <option value="jpeg">JPEG</option>
                            <option value="png">PNG</option>
                            <option value="pdf">PDF</option>
                            <option value="doc">DOC</option>
                            <option value="docx">DOCX</option>
                            <option value="txt">TXT</option>
                            <option value="xlx">XLX</option>
                            <option value="xlsx">XLSX</option>
                            <option value="csv">CSV</option>
                        </select>
                    </div>
                </div>
            `;
        }
        var i = 0;
        var optionItem = '';
        formItem.options.forEach(option => {
            var isRemove = '';
            if(i != 0){
                isRemove = `
                    <button type="button" class="input-group-text removeOption"><i class="las la-times"></i></button>
                `;
            }
            if (i==0) {
                html += `
                    <div class="d-flex justify-content-between flex-wrap">
                        <label>Add Options</label>
                        <button type="button" class="btn btn--sm btn--secondary addOption"><i class="las la-plus me-0"></i></button>
                    </div>
                `;
            }
            i += 1;
            optionItem += `
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" name="options[]" value="${option}" class="form-control form--control md-style" required>
                        ${isRemove}
                    </div>
                </div>
            `;
        });
        if (formItem.type != 'file') {
            html += `
                <div class="options mt-2">
                    ${optionItem}
                </div>
            `;
        }
        $('.generatorSubmit').text('Update');
        $('.extra_area').html(html);
        $('.extra_area').find('select').val(formItem.extensions);

    }


    resetAll(){
        $(formGenerator.formClassName).trigger("reset");
        $('.extra_area').html('');
        $('.generatorSubmit').text('Add');
        $('[name=update_id]').val('');
        var form = $(formGenerator.formClassName);
        form.find('[name=form_type]').val('').change();
        form.find('[name=form_width]').val('').change();
        form.find('[name=is_required]').val('').change();
        
    }

    closeModal(){
        var modal = $('#formGenerateModal');
        modal.modal('hide');
    }

    showModal(){
        this.resetAll();
        var modal = $('#formGenerateModal');
        modal.modal('show');
    }
}