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

const Home = () => {
    const [loadingTv, setLoadingTv] = useState(false);
    const [loadingMovies, setLoadingMovies] = useState(false);
    const [movies, setMovies] = useState([]);
    const [tv, setTv] = useState([]);
    const {addToast} = useToast();

    // На будущую реализацию удаления
    // api/v3/movie/68?deleteFiles=true&addImportExclusion=false
    useEffect(() => {
        setLoadingMovies(true);
        setLoadingTv(true);
        radarr().get("api/v3/movie")
            .then((r) => setMovies(r.data))
            .catch((err) => addToast(err, 'alert'))
            .finally(() => setLoadingMovies(false));

        sonarr().get("api/v3/series")
            .then((r) => setTv(r.data))
            .catch((err) => addToast(err, 'alert'))
            .finally(() => setLoadingTv(false));
        // eslint-disable-next-line
    }, []);

    return (
        <Container>
            <Accordion defaultActiveKey={["0"]} alwaysOpen>
                <Accordion.Item eventKey="0">
                    <Accordion.Header className="mt-3">
                        Фильмы
                    </Accordion.Header>
                    <Accordion.Body>
                        <Row>
                            {loadingMovies ?
                                (
                                    // Отображаем 10 скелетонов
                                    Array.from({length: 10}, (_, index) => (
                                        <Col key={`skeleton-${index}`}>
                                            <SkeletonCompact key={index} width={300} height={400}/>
                                        </Col>
                                    ))
                                )
                                :
                                movies?.map(rec => (
                                    <Col key={`col-${rec.title}-${rec.year}`}>
                                        <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
                                    </Col>
                                ))}
                        </Row>
                    </Accordion.Body>
                </Accordion.Item>
                <Accordion.Item eventKey={"1"}>
                    <Accordion.Header className="mt-5">Сериалы</Accordion.Header>
                    <Accordion.Body>
                        <Row>
                            {loadingTv ?
                                (
                                    // Отображаем 10 скелетонов
                                    Array.from({length: 10}, (_, index) => (
                                        <Col key={`skeleton-tv-${index}`}>
                                            <SkeletonCompact key={index} width={300} height={400}/>
                                        </Col>
                                    ))
                                )
                                :
                                tv.length > 0 ? tv.map(rec => (
                                    <Col key={`col-tv-${rec.title}-${rec.year}`}>
                                        <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
                                    </Col>
                                )) :
                                    <Badge bg="info">Функционал для сериалов пока не реализован</Badge>}
                        </Row>
                    </Accordion.Body>
                </Accordion.Item>
            </Accordion>
        </Container>
    );
};

export default Home;