const fdata = {
    floor: 2,
    floors: [null,null,null,null,null,null],
    floors_rooms: [[], [], [], [], [], []],
    inited: false,
    check: async () => {
        var count = 0
        fdata.floors.forEach(e => e == null ? count += 1 : null)
        document.querySelector('#block > p').innerHTML = `${6-count}/6 загружено...`
        if (count == 0) {
            await sleep(100)
            mapdisplay()
            removeblock()
        }
    },
    results: (query) => {
        query = query.toLowerCase()
        var found = []
        var foundrooms = []
        fdata.floors_rooms.forEach((rooms, floor) => {
            rooms.forEach(
                room => 
                    room && room.toLowerCase().includes(query) && !foundrooms.includes(room) 
                    ? function() {found.push({r: room, f: floor+1}); foundrooms.push(room)} () 
                    : null
            )
        })
        return found
    }
}

const floorsopen = () => {
    document.querySelector('#controls > .select').classList.toggle('hidden')
    Telegram.WebApp.HapticFeedback.impactOccurred('light')
}
const fswitch = floor => {
    if (floor == fdata.floor) return
    fdata.floor = floor
    if (!document.querySelector('#controls > .select').classList.contains('hidden')) document.querySelector('#controls > .select').classList.add('hidden')
    // 
    document.querySelector('#controls > .select > .active').classList.remove('active')
    document.querySelector('#controls > .current > span').innerHTML = `${floor} этаж`
    document.querySelectorAll('#controls > .select > span')[floor-1].classList.add('active')
    input.placeholder = 'Введи нужную аудиторию...'
    Telegram.WebApp.HapticFeedback.impactOccurred('light')
    mapdisplay()
}

const removeblock = () => {
    document.querySelector('#block').remove()
}
const highlight = (room) => {
    document.querySelectorAll('.highlight').forEach(e => e.classList.remove('highlight'))
    var lastfound = null
    document.querySelectorAll('#Аудитории > g').forEach(e => {
        if (e.getAttribute('serif:id') == room) {
            e.querySelector('*').classList.add('highlight')
            lastfound = e
        }
    })
    const scrollauto = (room) => {
        const bbox = room.getBBox()
        const svg = document.querySelector('#map > #wr > svg')
        const roomCenterX = (bbox.x%svg.viewBox.baseVal.width) + bbox.width / 2
        const scale = svg.clientHeight / svg.viewBox.baseVal.height
        const centerX = roomCenterX * scale
        const sc =  centerX - map.clientWidth / 2
        map.scroll({left: sc, behavior: 'smooth'})
        console.log(sc, bbox,roomCenterX, centerX, scale, map.clientWidth)

    }
    const map = document.querySelector('#map > #wr')
    if (room.includes('-')) {
        const building = room.split('-')[0]
        const values_to_scroll = {
            1: 1.1,
            2: 1.1,
            3: 1.1,
            4: 1.1,
            5: 1.1,
            6: 1.1,
            7: null,
            9: 10000,
            8: 3.9,
            10: 1.9
            
        }
        const val = values_to_scroll[building]
        if (!val) {return scrollauto(lastfound)}

        const sc = (map.scrollWidth - map.clientWidth) / val
        map.scroll({left: sc, behavior: 'smooth'})
        
    } else if (room.includes('Туале')) {
        const sc = (map.scrollWidth - map.clientWidth) / 1.1
        map.scroll({left: sc, behavior: 'smooth'})
    } else {
        return scrollauto(lastfound)
    }
}

const mapload = async () => {

    for (let i = 0; i < 6; i++) {
        await fetch(`./images/${i+1}.svg`).then(
            async e => {
                const mp = document.createElement('div');
                const svg = await e.text()
                fdata.floors[i] = svg
                mp.innerHTML = svg
                mp.querySelectorAll('#Аудитории > g').forEach(e => {
                    // console.log(e.getAttributeNS('serif:id'))
                    fdata.floors_rooms[i].push(e.getAttribute('serif:id'))
                })
                await sleep(100)
                fdata.check()
            }
        )
    }
    
    // [0,1,2,3,4,5].map(async (_, i) => 
    // await fetch(`./images/${i+1}.svg`).then(async e => {fdata.floors[i] = await e.text(); fdata.check()}))
}
const mapdisplay = async () => {
    const map = document.querySelector('#map > #wr')
    const svg = fdata.floors[fdata.floor-1] 
    map.innerHTML = svg
    if (!fdata.inited) {
        const sc = (map.scrollWidth - map.clientWidth) / 1.1
        map.scrollLeft = sc;
        console.log(sc)
        fdata.inited = true
    }
}