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

import BottomNavBar from '../components/BottomNavBar'
import useStoryDimensions from '../hooks/useStoryDimensions'
import AnnouncementDetails from '../components/AnnouncementDetails'
import Filters from '../components/Filters'

import { useHomeAnnouncementList } from '../hooks/api'

import puffSpinner from '../assets/puff.svg'
import { categoryGraphics } from '../assets/category'

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} />
        })
    })
}

function fallbackGenerateStories(announcementsFetch) {
    const stories = generateStories(announcementsFetch.data)

    if (announcementsFetch.loading)
        return fallbackStory()

    if (announcementsFetch.error)
        return fallbackStory(announcementsFetch.error)

    if (stories.length == 0)
        return fallbackStory("Здесь пока пусто")

    return stories
}

const fallbackStory = (text) => [{
    content: ({ action }) => {
        // eslint-disable-next-line react-hooks/rules-of-hooks
        useEffect(() => { action('pause') }, [action])

        return (
            <div style={{ margin: 'auto' }}>
                {text || <img src={puffSpinner} />}
            </div>
        )
    },
    header: { heading: text }
}]

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

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

    const [filterShown, setFilterShown] = useState(false)
    const [filter, setFilter] = useState(defaultFilters)

    const announcementsFetch = useHomeAnnouncementList(filter)

    const stories = fallbackGenerateStories(announcementsFetch)

    return (<>
        <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
        <div style={{ display: "flex", justifyContent: "center", backgroundColor: "rgb(17, 17, 17)" }}>
            {announcementsFetch.error ?
                (
                    <div style={{ width, height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <p className='text-danger'>{announcementsFetch.error}</p>
                    </div>
                ) : (
                    <Stories
                        stories={stories}
                        defaultInterval={11000}
                        height={height}
                        width={width}
                        loop={true}
                        keyboardNavigation={true}
                    />
                )
            }
        </div>
        <BottomNavBar toggleFilters={setFilterShown} width={width} />
    </>)
}

export default HomePage
