import React, {useEffect, useState} from 'react';
import CardCompact from "../components/CardCompact";
import {SkeletonCompact} from "../components/SkeletonCompact";
import RecommendationModal from "../components/RecommendationModal";
import {Col, Container, Row} from "react-bootstrap";
import {useToast} from "../hooks/useToast";
import {radarr} from "../contexts/client";

export function Recommendation() {
    const [recommendations, setRecommendations] = useState([]);
    const [loading, setLoading] = useState(false);
    const [modalView, setModalView] = useState(false);
    const [item, setItem] = useState({});
    const {addToast} = useToast();

    useEffect(() => {
        setLoading(true);
        radarr().get("api/v3/importlist/movie?includeRecommendations=true&includeTrending=true&includePopular=true")
            .then((r) => setRecommendations(r.data))
            .catch((err) => addToast(err, 'danger'))
            .finally(() => setLoading(false));
        // eslint-disable-next-lint
    }, []);

    function handleModal(item) {
        setModalView(true);
        setItem(item)
    }

    const handleCloseModal = () => {
        setModalView(false);
        setItem({})
    }

    const handleDownload = (item) => {
        const nState = recommendations.filter(r => r.title !== item.title && r.year !== item.year);
        setRecommendations(nState);
        addToast(`${item.title} добавлен в список загрузок`, 'success');
        handleCloseModal();
    }

    return (
        <Container className="text-center">
            <h2 className="mt-3">Рекомендации</h2>
            <Row>
                {loading ?
                    (
                        // Отображаем 10 скелетонов
                        Array.from({length: 10}, (_, index) => (
                            <Col key={`skeleton-${index}`}>
                                <SkeletonCompact key={index} width={300} height={400}/>
                            </Col>
                        ))
                    )
                    : recommendations.map(rec => (
                        <Col key={`col-${rec.title}-${rec.year}`} onClick={() => handleModal(rec)}>
                            <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
                        </Col>
                    ))}
            </Row>
            <RecommendationModal show={modalView} handleClose={handleCloseModal} item={item}
                                 handleSave={handleDownload} serial={false}/>
        </Container>
    );
}