// taxes_az/public/js/xml_mapping/field_generator.js

frappe.provide("taxes_az.xml_mapping");

taxes_az.xml_mapping.FieldGenerator = class FieldGenerator {
    constructor(frm) {
        this.frm = frm;
        this.fieldContainer = $('<div class="xml-fields-container"></div>');
    }
    
    // Очистить все динамически созданные поля
    clearFields() {
        this.fieldContainer.empty();
        if (this.section) {
            this.section.remove();
        }
    }
    
    // Создать UI для выбора полей
    createFieldsUI(xmlStructure) {
        // Проверяем, существует ли уже секция
        if ($('.xml-mapping-section').length) {
            this.clearFields();
        } else {
            this.clearFields();
            
            // Создаем секцию для полей XML
            this.section = $('<div class="xml-mapping-section frappe-card"></div>');
            const sectionTitle = $('<h5 class="frappe-card-header p-3">' + __('XML Fields Mapping') + '</h5>');
            this.section.append(sectionTitle);
            
            // Добавляем поле поиска
            const searchField = $(`
                <div class="form-group p-3">
                    <div class="input-group">
                        <input type="text" class="form-control xml-search-field" placeholder="${__('Search in XML fields...')}">
                        <div class="input-group-append">
                            <button class="btn btn-default xml-search-button">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `);
    
            this.section.append(searchField);
            this.section.append(this.fieldContainer);
            
            // Добавляем секцию в форму после основной области формы
            $('.form-layout').after(this.section);
            
            // Добавляем обработчик поиска
            searchField.find('.xml-search-field, .xml-search-button').on('keyup click', () => {
                const searchText = searchField.find('.xml-search-field').val().toLowerCase();
                
                this.fieldContainer.find('.xml-field-row').each((i, row) => {
                    const $row = $(row);
                    const path = $row.find('.xml-field-path').text().toLowerCase();
                    const value = $row.find('.xml-field-value').text().toLowerCase();
                    
                    if (path.includes(searchText) || value.includes(searchText)) {
                        $row.show();
                    } else {
                        $row.hide();
                    }
                });
            });
        }
        
        // Для каждого пути создаем элемент интерфейса
        xmlStructure.fieldPaths.forEach(fieldInfo => {
            this._createFieldElement(fieldInfo);
        });
        
        // Инициализируем селектор DocType полей
        if (this.frm.doc.target_doctype) {
            const fieldSelector = new taxes_az.xml_mapping.DoctypeFieldSelector(this.frm);
            fieldSelector.attachFieldSelectors(this.fieldContainer, xmlStructure.fieldPaths);
        }
        
        // Добавляем стили для полей
        this._addStyles();
    }
    
    clearFields() {
        this.fieldContainer = $('<div class="xml-fields-container p-3"></div>');
        
        // Если секция существует, очищаем только контейнер полей
        if ($('.xml-mapping-section').length) {
            $('.xml-fields-container').replaceWith(this.fieldContainer);
        }
    }
    

    clearFields() {
        this.fieldContainer = $('<div class="xml-fields-container p-3"></div>');
        if (this.section) {
            this.section.remove();
        }
    }
    
    clearFields() {
        this.fieldContainer = $('<div class="xml-fields-container"></div>');
        if (this.section) {
            this.section.remove();
        }
    }
    
    // Создание отдельного элемента поля
    _createFieldElement(fieldInfo) {
        const fieldRow = $(`
            <div class="xml-field-row" data-path="${fieldInfo.path}">
                <div class="xml-field-path">${fieldInfo.path}</div>
                <div class="xml-field-value">${fieldInfo.value}</div>
                <div class="xml-field-selector"></div>
            </div>
        `);
        
        this.fieldContainer.append(fieldRow);
    }
    
    // Добавление стилей для UI полей
    _addStyles() {
        if (!$('#xml_mapping_styles').length) {
            $('head').append(`
                <style id="xml_mapping_styles">
                    .xml-fields-container {
                        margin-top: 15px;
                        max-height: 600px;
                        overflow-y: auto;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        padding: 10px;
                    }
                    .xml-field-row {
                        display: flex;
                        margin-bottom: 10px;
                        padding: 8px;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        background-color: #f9f9f9;
                    }
                    .xml-field-path {
                        flex: 1.5;
                        font-weight: bold;
                        overflow-wrap: break-word;
                        word-break: break-all;
                        padding-right: 10px;
                    }
                    .xml-field-value {
                        flex: 1;
                        color: #555;
                        margin: 0 10px;
                        overflow-wrap: break-word;
                        word-break: break-all;
                    }
                    .xml-field-selector {
                        flex: 1.5;
                    }
                    .xml-search-field {
                        margin-bottom: 10px;
                    }
                </style>
            `);
        }
    }
};