import { Link } from 'react-router-dom'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import { Button } from 'react-bootstrap'

import { UserCategory, composeUserCategoriesFilters, userCategoriesInfos } from '../assets/userCategories'
import { Announcement } from '../api/announcement/types'
import { categoryGraphics, categoryNames } from '../assets/category'
import { URLEncodeFilters } from '../utils/filters'

import rightAngleIcon from '../assets/rightAngle.svg'

import styles from '../styles/StoriesPreview.module.css'

type StoriesPreviewProps = {
    announcements: Announcement[],
    category: UserCategory,
}

const StoriesPreview = ({ announcements, category }: StoriesPreviewProps) => (
    announcements.length > 0 ? (
        announcements.map((ann, i) => (
            <li key={`${category}${i}`}>
                <Link to={'/?' + new URLSearchParams({
                    ...URLEncodeFilters(composeUserCategoriesFilters[category]()),
                    storyIndex: i.toString(),
                }).toString()} className={styles.link}>
                    {ann.src?.endsWith('mp4') ? (
                        <video src={ann.src} className={styles.image} />
                    ) : (
                        <img
                            src={ann.src || categoryGraphics[ann.category]}
                            alt={'Изображение' + (ann.src ? 'предмета' : categoryNames[ann.category])}
                            className={styles.image}
                        />
                    )}
                    <p className={styles.title}>{ann.name}</p>
                    <p className={styles.title}>{userCategoriesInfos[category](ann)}</p>
                </Link>
            </li>
        ))
    ) : (
        <li>
            <Link to={'/?' + new URLSearchParams({
                ...URLEncodeFilters(composeUserCategoriesFilters[category]()),
                storyIndex: '0',
            }).toString()} className={styles.link}>
                <img
                    src='/static/empty.png'
                    alt='Здесь ничего нет'
                    className={styles.image}
                />
            </Link>
        </li>
    )
)

function StoriesPreviewCarousel({ announcements, category }: StoriesPreviewProps) {
    const ulElement = useRef<HTMLUListElement | null>(null)
    const [showScrollButtons, setShowScrollButtons] = useState({ left: false, right: false })

    const determineShowScrollButtons = (ul: HTMLUListElement) => (
        setShowScrollButtons({
            left: ul.scrollLeft > 0,
            right: ul.scrollLeft < (ul.scrollWidth - ul.clientWidth),
        })
    )

    useEffect(() => {
        const ul = ulElement.current
        if (ul) {
            determineShowScrollButtons(ul)

            const f = () => determineShowScrollButtons(ul)

            ul.addEventListener('scroll', f)

            return () => ul.removeEventListener('scroll', f)
        }
    }, [])

    useLayoutEffect(() => {
        const ul = ulElement.current

        if (ul) {
            determineShowScrollButtons(ul)
        }
    }, [announcements])

    const doScroll = (forward: boolean) => () => {
        const ul = ulElement.current
        if (ul) {
            const storyWidth = window.innerHeight * 0.25 * 9 / 16 + 10
            ul.scrollLeft += forward ? storyWidth : -storyWidth
        }
    }

    return <div className={styles.container}>
        {showScrollButtons.left &&
            <Button onClick={doScroll(false)} className={`${styles.scrollButton} ${styles.leftScrollButton}`}>
                <img src={rightAngleIcon} alt='Показать ещё' />
            </Button>
        }

        <ul className={styles.list} ref={ulElement}>
            <StoriesPreview announcements={announcements} category={category} />
        </ul>

        {showScrollButtons.right &&
            <Button onClick={doScroll(true)} className={`${styles.scrollButton} ${styles.rightScrollButton}`}>
                <img src={rightAngleIcon} alt='Показать ещё' />
            </Button>
        }
    </div>
}

export default StoriesPreviewCarousel