import {DataSource} from './BrandDetailModel.js';
import '../component/OnboardBrandBottomSheet.js';
import '../component/AddFieldSheet.js';
import '../component/ConfirmationDialog.js';
import '../component/MessageBottomSheet.js';

class BrandDetailView {
    constructor(model) {
        this.model = model;
        this.brandDetailsContainer = document.getElementById('brand-details-container');
        this.addBrandContainer = document.getElementById('add-brand-container');

        this.sectionsContainer = document.getElementById('sections');
        this.addFieldSheet = document.getElementById('addFieldSheet');
        this.confirmationDialog = document.getElementById('confirmationDialog');
        this.messageBottomSheet = document.getElementById('messageBottomSheet');

        this.uploadBrandBtn = document.getElementById('uploadBrandBtn');
        this.uploadJsonBtn = document.getElementById('uploadJsonBtn');
        this.addNewBrandBtn = document.getElementById('newBrandBtn');
        this.exportBrandBtn = document.getElementById('exportBrandBtn');
        this.allBrandsButton = document.getElementById('allBrandsButton');

        this.onboardSheet = document.getElementById('onboardBottomSheet');

        this.initializeApp();
    }

    async initializeApp() {
        switch (this.model.source) {
            case DataSource.LOCAL:
                return await this.setupLocal();
            case DataSource.REMOTE:
                return await this.setupRemote();
            default:
                throw new Error('Unknown data source');
        }
    }

    async setupLocal() {
        this.allBrandsButton.style.display = 'block'
        this.toggleAddBrandContainer(false);
    }

    async setupRemote() {
        this.allBrandsButton.style.display = 'none'
        this.toggleAddBrandContainer(true);
    }

    toggleAddBrandContainer(show) {
        this.addBrandContainer.style.display = show ? 'block' : 'none';
        this.brandDetailsContainer.style.display = show ? 'none' : 'block';
    }

    updateAppNameTitle(brandName) {
        const brandNametitle = document.getElementById('brandNametitle');
        if (brandNametitle) {
            brandNametitle.textContent = brandName;
        }
    }

    createSection(key, name, inputType) {
        const section = document.createElement('div');
        section.className = 'section';

        section.dataset.key = key
        section.dataset.name = name
        section.dataset.inputType = inputType

        const titleContainer = document.createElement('div');
        titleContainer.className = 'section-title-container';

        const title = document.createElement('h2');
        title.textContent = name;
        titleContainer.appendChild(title);

        const subtitleElement = document.createElement('p');
        subtitleElement.className = 'section-subtitle';
        subtitleElement.textContent = `${key}.json`;
        titleContainer.appendChild(subtitleElement);

        section.appendChild(titleContainer);

        return section;
    }

    populateSection(sectionItem, sectionElement, content, inputType) {
        for (const [key, value] of Object.entries(content)) {
            if (Array.isArray(value)) {
                sectionElement.appendChild(this.createInputField(sectionItem, key, value, 'array'));
            } else if (typeof value === 'object' && value !== null) {
                for (const [subKey, subValue] of Object.entries(value)) {
                    sectionElement.appendChild(this.createInputField(sectionItem, `${key}.${subKey}`, subValue, inputType));
                }
            } else {
                sectionElement.appendChild(this.createInputField(sectionItem, key, value, inputType));
            }
        }
    }

    createInputField(sectionItem, key, value, inputType) {
        const container = document.createElement('div');
        container.className = 'input-group';
        const label = document.createElement('label');
        label.textContent = key;
        container.appendChild(label);

        const inputWrapper = document.createElement('div');
        inputWrapper.className = 'input-wrapper';

        if (inputType === 'array') {
            const arrayInputContainer = document.createElement('div');
            arrayInputContainer.className = 'array-input-container';

            const input = document.createElement('input');
            input.type = 'text';
            input.id = key;
            input.className = 'array-input';
            input.placeholder = 'Enter array value';

            const addButton = document.createElement('button');
            addButton.className = 'add-array-item';
            addButton.textContent = '+';

            arrayInputContainer.appendChild(input);
            arrayInputContainer.appendChild(addButton);

            const arrayItemsContainer = document.createElement('div');
            arrayItemsContainer.className = 'array-items-container';

            inputWrapper.appendChild(arrayInputContainer);
            inputWrapper.appendChild(arrayItemsContainer);

            if (Array.isArray(value)) {
                value.forEach(item => {
                    this.addArrayItem(sectionItem, arrayItemsContainer, item);
                });
            }

            addButton.addEventListener('click', () => {
                this.addArrayItem(sectionItem, arrayItemsContainer, input.value.trim());
                input.value = '';
            });

        } else {
            const input = document.createElement('input');
            input.type = inputType;
            input.id = key;

            if (inputType === 'color') {
                input.value = value.startsWith('#') ? value : `#${value.substring(4)}`;
            } else {
                input.value = value;
            }

            inputWrapper.appendChild(input);
        }

        const deleteIcon = document.createElement('span');
        deleteIcon.className = 'delete-icon';
        deleteIcon.textContent = '×';
        deleteIcon.onclick = () => this.onDeleteField(sectionItem, container);
        inputWrapper.appendChild(deleteIcon);

        container.appendChild(inputWrapper);

        container.addEventListener('change', () => this.onSectionChanged(sectionItem, container.closest('.section')));

        return container;
    }

    addArrayItem(sectionItem, container, value) {
        const itemContainer = document.createElement('div');
        itemContainer.classList.add('array-item');

        const itemInput = document.createElement('input');
        itemInput.type = 'text';
        itemInput.classList.add('array-item-input');
        itemInput.value = value;

        const deleteButton = document.createElement('button');
        deleteButton.classList.add('delete-array-item');
        deleteButton.textContent = '×';
        deleteButton.addEventListener('click', () => {
            itemContainer.remove();
            this.onSectionChanged(sectionItem, container.closest('.section'));
        });

        itemContainer.appendChild(itemInput);
        itemContainer.appendChild(deleteButton);
        container.appendChild(itemContainer);

        this.onSectionChanged(sectionItem, container.closest('.section'));
    }

    showAddFieldForm(sectionItem, sectionElement, inputType) {
        this.addFieldSheet.show(inputType, (name, value) => {
            const newField = this.createInputField(sectionItem, name, value, inputType);
            sectionElement.insertBefore(newField, sectionElement.lastElementChild);
            this.onSectionChanged(sectionItem, sectionElement);
        })
    }

    showConfirmationDialog(message, onConfirm) {
        this.confirmationDialog.showDialog(message, onConfirm);
    }

    showApplyChangesButton() {
        const applyChangesButton = document.getElementById('applyChangesButton');
        applyChangesButton.style.display = 'block';
    }

    showSwitchButton() {
        const switchButton = document.getElementById('switchButton');
        switchButton.style.display = 'block';
    }

    updateErrorCount(count) {
        const countElement = document.querySelector('.count');
        countElement.textContent = count;
    }

    showMessage(message) {
        this.messageBottomSheet.showMessage(message);
    }

    setOnSectionChangedHandler(handler) {
        this.onSectionChanged = handler;
    }

    setOnDeleteFieldHandler(handler) {
        this.onDeleteField = handler;
    }

    showOnboardBrandForm(onSubmit) {
        this.onboardSheet.show('Brand Details', 'Add Brand', onSubmit);
    }

    async hideOnboardBrandForm() {
        this.onboardSheet.hide();
    }

}

export default BrandDetailView;