import Stories from 'react-insta-stories'
import { useEffect, useState } from 'react'

import BottomNavBar from '../components/BottomNavBar'
import useStoryDimensions from '../utils/useStoryDimensions'

import { API_URL } from '../config'

import "./leafletStyles.css"
import 'leaflet/dist/leaflet.css'

import AnnouncementDetails from '../components/AnnouncementDetails'
import { categoryGraphics } from '../assets/category'
import Filters from '../components/Filters'
import { removeNull } from '../utils'

function generateStories(announcements) {
    return announcements.map(announcement => {
        return ({
            id: announcement.id,
            url: announcement.src || categoryGraphics.get(announcement.category),
            type: announcement.src?.endsWith("mp4") ? "video" : undefined,
            seeMore: ({ close }) => <AnnouncementDetails close={close} announcement={announcement} />
        })
    })
}

const mock = [
    {
        id: 5,
        name: "Огурец",
        category: "fruits_vegatables",
        src: null,
        bestBy: 10000,
        description: "Очень вкусный огурец, прям, закачаешься",
        lat: 59.9724,
        lng: 30.3227,
        address: "ул. Профессора Попова, дом 5 литера Ф",
        metro: "Петроградская"
    },
    {
        id: 9,
        name: "Арбуз",
        category: "soup",
        src: "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
        bestBy: 20000,
        description: "Очень вкусный арбуз, прям, закачаешься",
        lat: 60.9724,
        lng: 30.3227,
        address: "ул. Профессора Попова, дом 50 литера Ф",
        metro: "Горьковская"
    }
]

const defaultFilters = { userId: null, category: null, metro: null, bookedBy: null }

const PROD = true

function HomePage() {
    const { height, width } = useStoryDimensions(16 / 10)

    const [announcements, setAnnouncements] = useState([])

    const [filterShown, setFilterShown] = useState(false)

    const [filter, setFilter] = useState(defaultFilters)

    useEffect(() => {
        (async () => {
            try {
                const res = PROD ? await fetch(API_URL + "/announcements?" + new URLSearchParams(removeNull(filter))) : null

                const json = PROD ? (await res.json()).list_of_announcements : mock

                setAnnouncements(json)
            }
            catch (err) {
                console.error(err)
            }
        })()
    }, [filter])

    const toggleFilters = (toggle) => setFilterShown(toggle)

    return (<>
        <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
        <div style={{ display: "flex", justifyContent: "center", backgroundColor: "rgb(17, 17, 17)" }}>
            {announcements.length && <Stories
                stories={generateStories(announcements)}
                defaultInterval={11000}
                height={height}
                width={width}
                loop={true}
                keyboardNavigation={true}
            />}
        </div>
        <BottomNavBar toggleFilters={toggleFilters} width={width} />
    </>)
}

export default HomePage