const Editor = {
    init: async (type, id) => {
        let html = await fetch('/lib/pages/editor/index.html').then((response) => response.text());
        app.innerHTML = html;

        map = "";
        houseGroup = "";
        entransePolygonsGroup = "";
        entranseNumPolygonsGroup = "";
        splitPolygonsGroup = "";
        RectangleGroup = "";
        numApartments = 1;

        Editor.info.setHTML(type, id);

        // document.getElementById("area-form").addEventListener("submit", async function (event) {
        //     event.preventDefault();

        //     await Editor.api.setPack();
        // })
    },
    loadAPI: async function (URL) {
        let uuid = localStorage.getItem("uuid");
        return await fetch(URL, {
            method: 'GET',
            headers: {
                "Content-Type": "application/json",
                "Authorization": uuid
            }
        }).then((response) => response.json());
    },
    info: {
        list: {
            type: null,
            group_id: null,
            title: null,
            number: null,
            points: [],
            points_number: [],
            point_icons: [],
            geo: [],
            osm_id: [],
            settlement: [],
            description: null,
            entrance: [],
            apartments: {}
        },
        setHTML: async (type, id) => {
            let detailsInfo_address_title = document.getElementById('info-address-title');
            let detailsInfo_number_title = document.getElementById('info-number-title');
            let detailsInfo_settlement_title = document.getElementById('info-settlement-title');
            let detailsInfo_group_title = document.getElementById('info-group-title');
            let detailsInfo_osm_title = document.getElementById('info-osm-title');

            Editor.info.list = await Editor.loadAPI(`${CONFIG.api}${type}/${id}`);
            Editor.info.list.type = type;
            Editor.info.list.entrance = [];
            Editor.info.list.apartments = {};

            console.log(Editor.info.list);
            detailsInfo_address_title.value = Editor.info.list.title;
            detailsInfo_number_title.value = Editor.info.list.number;
            detailsInfo_settlement_title.value = Editor.info.list.settlement;
            detailsInfo_group_title.value = Editor.info.list.group_id;
            detailsInfo_osm_title.value = Editor.info.list.osm_id.join(", ");

            Editor.osm.init();
            Editor.info.setMap();
            
            if (type == "house") {
                Editor.entrances.setHTML(id);
                document.getElementById('details-area').style.display = "";
            }
        },
        setMap: async () => {
            houseGroup.clearLayers();

            for (let i = 0; i < Editor.info.list.points.length; i++) {
                const element = Editor.info.list.points[i];

                if (Editor.info.list.type == "homestead") {
                    map.setView([Editor.info.list.geo.lat, Editor.info.list.geo.lng], 17);

                    L.polygon(element, {
                        color: colorGroup(Editor.info.list.group_id),
                        radius: 500,
                        fillOpacity: 0.3,
                        dashArray: '20, 15',
                        dashOffset: '20',
                    }).addTo(houseGroup);
                } else if (Editor.info.list.type == "house") {
                    map.setView([Editor.info.list.geo.lat, Editor.info.list.geo.lng], 18);

                    L.polygon(element, {
                        color: "#585858",
                        fillColor: colorGroup(Editor.info.list.group_id),
                        fillOpacity: 0.8,
                        tm_id: `house_${i}`
                    }).addTo(houseGroup);
                }
            }
        }
    },
    entrances: {
        list: [],
        setHTML: async (id) => {
            Editor.entrances.list = await Editor.loadAPI(`${CONFIG.api}house/${id}/entrances`);

            console.log(Editor.entrances.list);
            Editor.entrances.setMap()
        },
        setMap: async () => {
            entransePolygonsGroup.clearLayers();
            entranseNumPolygonsGroup.clearLayers();

            for (let i = 0; i < Editor.entrances.list.length; i++) {
                const element = Editor.entrances.list[i];
                console.log(element);

                let listEntranse = document.getElementById('list-entranse');
                listEntranse.style.display = "";
                listEntranse.innerHTML += `
                    <div class="house" style="align-items: center;" id="Entranse_${element.id}">
                        <p>${element.entrance_number + 1}</p>
                    </div>
                `;

                let listArea = document.getElementById('list-area');
                listArea.innerHTML += `
                    <div class="block-area" id="block-area-${element.id}">
                      <h3>${element.title}</h3>
                      <button class="addFloors" title="Додати поверх" type="button" onclick="Editor.apartments.addFloors('${element.id}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>

                      <div id="area-${element.id}"></div>
                    </div>
                `;

                Editor.apartments.setHTML(element.id);

                L.polygon(element.points, { color: 'red' }).addTo(entransePolygonsGroup);

                let myIcon = L.divIcon({ className: 'entranse_number', html: `<div class="markerEntranse">${element.entrance_number + 1}</div>` });
                L.marker(element.points_number, { icon: myIcon }).addTo(entranseNumPolygonsGroup);
            }
        }
    },
    apartments: {
        list: [],
        setHTML: async (id) => {
            Editor.apartments.list[`${id}`] = await Editor.loadAPI(`${CONFIG.api}apartments/${id}`);

            const uniqueFloors = [...new Set(Editor.apartments.list[`${id}`].map(item => item.floors_number))];
            for (let i = 0; i < uniqueFloors.length; i++) {
                let num = uniqueFloors[i];

                let area = document.getElementById(`area-${id}`);

                let div = document.createElement('div');
                div.className = "block-apartments-floors";
                div.id = `floors-${id}-${num}`
                div.innerHTML = `
                    <h2>Поверх ${num}</h2>
                    <button class="addApartment" id="buttonApartment-${id}-${num}" title="Додати квартиру" type="button" onclick="Editor.apartments.addApartment('${id}', '${num}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
                `;

                area.prepend(div);
            }

            Editor.apartments.list[`${id}`].sort((a, b) => b.title - a.title);

            for (let i = 0; i < Editor.apartments.list[`${id}`].length; i++) {
                const apartment = Editor.apartments.list[`${id}`][i];
                let num = apartment.floors_number;

                let floorsBlock = document.getElementById(`floors-${id}-${num}`);

                let div = document.createElement('div');
                div.className = "block-apartments-number";
                div.id = `block-apartments-${id}-${apartment.id}`
                div.innerHTML = `
                    <input type="text" value="${apartment.title}" id="apartament-${id}-${apartment.id}" onchange="Editor.apartments.editApartment('${id}','${apartment.id}')">
                    <button type="button" onclick="Editor.apartments.deleteApartment('${id}','${apartment.id}')">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
                    </button>
                `;
                floorsBlock.prepend(div);

                numApartments++;
                let next_apartment_title = document.getElementById('next-apartment-title');
                next_apartment_title.value = numApartments;
            }
        },
        editNum: (element) => {
            numApartments = Number(element.value);
        },
        addFloors: async (area) => {
            let areaBlock = document.getElementById(`area-${area}`);
            let uniqueFloors = [...new Set(Editor.apartments.list[area].map(obj => obj.floors_number))];
            let new_floors = uniqueFloors.length + 1;

            const uuid = localStorage.getItem('uuid');
            const URL = `${CONFIG.api}/apartments/${area}`;
            await fetch(URL, {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": uuid
                },
                body: JSON.stringify({
                    apartment_number: Editor.apartments.list[area].length,
                    title: numApartments.toString(),
                    floors_number: Number(new_floors)
                })
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data);

                    let div = document.createElement('div');
                    div.className = "block-apartments-floors";
                    div.id = `floors-${area}-${new_floors}`
                    div.innerHTML = `
                        <h2>Поверх ${new_floors}</h2>
                        <div class="block-apartments-number" id="block-apartments-${area}-${data.id}">
                            <input type="text" value="${numApartments}" id="apartament-${area}-${data.id}" onchange="Editor.apartments.editApartment('${area}', '${data.id}')">
                            <button type="button" onclick="Editor.apartments.deleteApartment('${area}', '${data.id}')">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
                            </button>
                        </div>
                        <button class="addApartment" id="buttonApartment-${area}-${new_floors}" title="Додати квартиру" type="button" onclick="Editor.apartments.addApartment('${area}', '${new_floors}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
                    `

                    areaBlock.prepend(div);

                    console.log(Editor.apartments.list[area]);


                    Editor.apartments.list[area].push({
                        id: data.id,
                        entrance_id: Number(area),
                        apartment_number: Editor.apartments.list[area].length,
                        title: numApartments.toString(),
                        floors_number: Number(new_floors)
                    });

                    numApartments++;

                    let next_apartment_title = document.getElementById('next-apartment-title');
                    next_apartment_title.value = numApartments;
                })
                .catch(err => {
                    console.log(err);
                })
        },
        addApartment: async (area, floors) => {
            const uuid = localStorage.getItem('uuid');
            const URL = `${CONFIG.api}/apartments/${area}`;
            await fetch(URL, {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": uuid
                },
                body: JSON.stringify({
                    apartment_number: Editor.apartments.list[area].length,
                    title: numApartments.toString(),
                    floors_number: Number(floors)
                })
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data);

                    Editor.apartments.list[area].push({
                        id: data.id,
                        entrance_id: Number(area),
                        apartment_number: Editor.apartments.list[area].length,
                        title: numApartments.toString(),
                        floors_number: Number(floors)
                    });

                    let floorsBlock = document.getElementById(`floors-${area}-${floors}`);
                    document.getElementById(`buttonApartment-${area}-${floors}`).remove();

                    floorsBlock.innerHTML += `
                        <div class="block-apartments-number" id="block-apartments-${area}-${data.id}">
                            <input type="text" value="${numApartments}" id="apartament-${area}-${data.id}" onchange="Editor.apartments.editApartment('${area}', '${data.id}')">
                            <button type="button" onclick="Editor.apartments.deleteApartment('${area}', '${data.id}')">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
                            </button>
                        </div>
                    `;
                    floorsBlock.innerHTML += `<button class="addApartment" id="buttonApartment-${area}-${floors}" title="Додати квартиру" type="button" onclick="Editor.apartments.addApartment('${area}', '${floors}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>`

                    numApartments++;

                    let next_apartment_title = document.getElementById('next-apartment-title');
                    next_apartment_title.value = numApartments;
                })
                .catch(err => {
                    console.log(err);
                })
        },
        editApartment: async (area, apartament) => {
            let input = document.getElementById(`apartament-${area}-${apartament}`);
            input.setAttribute("value", input.value);

            const pos = Editor.apartments.list[area].map(e => e.id).indexOf(Number(apartament));
            Editor.apartments.list[area][pos].title = input.value;

            const uuid = localStorage.getItem('uuid');
            const URL = `${CONFIG.api}/apartments/${area}`;
            await fetch(URL, {
                method: 'PUT',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": uuid
                },
                body: JSON.stringify({
                    title: Editor.apartments.list[area][pos].title,
                    status: Editor.apartments.list[area][pos].status,
                    description: Editor.apartments.list[area][pos].description,
                    id: Editor.apartments.list[area][pos].id
                })
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                })
                .catch(err => {
                    console.log(err);
                })
        },
        deleteApartment: async (area, apartament) => {
            const pos = Editor.apartments.list[area].map(e => e.id).indexOf(Number(apartament));

            const uuid = localStorage.getItem('uuid');
            const URL = `${CONFIG.api}/apartments/${area}`;
            await fetch(URL, {
                method: 'DELETE',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": uuid
                },
                body: JSON.stringify({
                    id: Editor.apartments.list[area][pos].id
                })
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    document.getElementById(`block-apartments-${area}-${apartament}`).remove();
                    Editor.apartments.list[area].splice(pos, 1);

                    numApartments--;
                    let next_apartment_title = document.getElementById('next-apartment-title');
                    next_apartment_title.value = numApartments;
                })
                .catch(err => {
                    console.log(err);
                })
        }
    },
    osm: {
        init: () => {
            let center = { lat: 49.5629016, lng: 25.6145625 };
            let zoom = 19;

            let googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                minZoom: 15,
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
            });

            let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                minZoom: 15
            });

            let mytile = L.tileLayer('https://tm.rozenrod.com/webp/{z}/{x}/{y}.webp', {
                maxZoom: 20,
                minZoom: 15,
                tms: true
            });

            if (!map) {

                houseGroup = new L.FeatureGroup();
                splitPolygonsGroup = new L.FeatureGroup();
                RectangleGroup = new L.FeatureGroup();
                entransePolygonsGroup = new L.FeatureGroup();
                entranseNumPolygonsGroup = new L.FeatureGroup();

                map = L.map('map', {
                    renderer: L.canvas(),
                    center,
                    zoom,
                    layers: [
                        googleHybrid,
                        osm,
                        mytile,
                        houseGroup,
                        entransePolygonsGroup,
                        entranseNumPolygonsGroup,
                        splitPolygonsGroup,
                        RectangleGroup,
                    ],
                    zoomControl: false
                });


                let baseMaps = {
                    "Google Hybrid": googleHybrid,
                    "OpenStreetMap": osm,
                    "Territory Map": mytile
                };
                let overlayMaps = {
                    "Будинки": houseGroup,
                    "Під'їзди": entransePolygonsGroup,
                    "Номера під'їздів": entranseNumPolygonsGroup,
                    "Слой редактирования": splitPolygonsGroup,
                    "Слой линейки": RectangleGroup,
                };

                L.control.layers(baseMaps, overlayMaps, { position: 'bottomright' }).addTo(map);

                map.pm.setLang("ua");

                map.pm.addControls({
                    position: 'bottomright',
                    drawCircleMarker: false,
                    drawPolyline: false,
                    drawPolygon: false,
                    drawRectangle: false,
                    drawCircle: false,
                    drawText: false,
                    drawMarker: false,
                    cutPolygon: false,
                    tooltips: false
                });
                map.pm.toggleControls()

                map.pm.setGlobalOptions({
                    layerGroup: splitPolygonsGroup
                })
            }
        }
    }
}