import React, {useEffect, useState} from 'react';
import {Button, Col, Container, FormCheck, FormSelect, Modal, Row} from 'react-bootstrap';
import axios from "axios";
import {useToast} from "../hooks/useToast";

const movieMonitor = [
    {
        id: "movieAndCollection",
        name: "Все части"
    },
    {
        id: "movieOnly",
        name: "Только этот фильм"
    }
]

const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
    const [movieQuality, setMovieQuality] = useState([])
    const [quality, setQuality] = useState(null)
    const [monitor, setMonitor] = useState(null)
    const [film, setFilm] = useState(false)
    const {addToast} = useToast();

    useEffect(() => {
        axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/qualityprofile`,
            {
                headers: {
                    'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`
                }
            })
            .then((r) => {
                setMovieQuality(r.data)
            })
            .catch(console.error);
    }, []);

    const handleSubmit = () => {
        const request = !serial ? createMovieRequest : null;
        request()
            .then(res => {
                axios.post(`${process.env.REACT_APP_RADARR_HOST}/api/v3/movie`, res,
                    {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}})
                    .then(() => handleSave(item, serial))
                    .catch((err) => addToast(err, 'danger'));
            })
            .catch((err) => addToast(err, 'danger'));
    }

    const createMovieRequest = async () => {
        if(!monitor) {
            // eslint-disable-next-line no-throw-literal
            throw 'Проверьте пункт отслеживания';
        }
        if(!quality) {
            // eslint-disable-next-line no-throw-literal
            throw 'Необходимо указать качество';
        }
        let request = item;
        request.id = 0;
        request.monitored = true;
        request.qualityProfileId = quality;
        request.minimumAvailability = "released"
        request.addOptions = {
            monitor: monitor,
            searchForMovie: true
        }
        const folders = await axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/rootFolder`,
            {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}});
        request.rootFolderPath = folders.data.find((d) => d.path.includes(film ? "film" : "mult")).path;

        const tags = await axios.get(`${process.env.REACT_APP_RADARR_HOST}/api/v3/tag`,
            {headers: {'X-Api-Key': `${process.env.REACT_APP_RADARR_API_KEY}`}});
        request.tags = tags.data.filter((t) => t.label === (film ? "film" : "mult")).map((t) => t.id)

        return request;
    }

    if(!item) {
        return null;
    }

    return (
        <Modal show={show} onHide={handleClose} fullscreen={true}>
            <Modal.Header closeButton>
                <Modal.Title>{item.title}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Container fluid='xl'>
                    <Row>
                        <Col sm={{span: 3}}>
                            <img width="100%" className='mb-3' src={item.remotePoster} alt={item.title}/>
                        </Col>
                        <div className="col-9 container text-center">
                            <Row>
                                <div className="col">
                                    <p>{item.overview}</p>
                                </div>
                            </Row>
                            <Row style={{width: '60%'}}>
                                <Col>
                                    <p style={{marginRight: '1rem'}}>Мультик</p>
                                    <FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
                                               onChange={() => setFilm(!film)}/>
                                    <p>Фильм</p>
                                    <FormCheck type='checkbox' disabled={!serial}
                                               style={{marginBottom: '1rem', marginLeft: '1rem'}}
                                               label="Сериал"/>
                                </Col>
                            </Row>
                            <Row>
                                <Col>
                                    <p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p>
                                    <FormSelect onChange={(e) => setMonitor(e.target.value)}>
                                        <option selected value={null}>Выберите пункт из меню</option>
                                        {movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
                                    </FormSelect>
                                </Col>
                            </Row>
                            <Row>
                                <Col>
                                    <p style={{width: '50%', paddingTop: '1rem'}}>Качество</p>
                                    <FormSelect onChange={(e) => setQuality(parseInt(e.target.value))}>
                                        <option selected value={null}>Выберете качество</option>
                                        {movieQuality.map((quality) => <option value={quality.id}
                                                                               key={quality.id}>{quality.name}</option>)}
                                    </FormSelect>
                                </Col>
                            </Row>
                        </div>
                    </Row>

                    <Button variant={'primary'} onClick={() => handleSubmit()}>Скачать</Button>
                </Container>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => handleClose()}>
                    Закрыть
                </Button>
            </Modal.Footer>
        </Modal>
    );
};

export default RecommendationModal;