import { React, useEffect, useState } from 'react'
import ContentBlock from './components/ContentBlock'
import { useParams } from 'react-router-dom'
import axios from 'axios'

export default function FilmPage() {
    const params = useParams()
    const [items, setItems] = useState({});

    useEffect(() => {
        fetch("http://localhost:8080/cinema/" + params.id)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                console.info('Get film success');
                setItems(data);
            })
            .catch(function (error) {
                console.error('Error:', error);
                throw "Can't get film";
            });
    }, []);

    const content = (
        <div>
            <div className="container pt-4">
                <div className="container d-block text-start">
                    <img className="row posterFilmPage img-fluid float-start me-3 mt-3" src={items.image} alt={items.name} align="left" />
                    <a className="col text-white fw-bold fs-2" onClick={() => window.location.reload()} style={{ cursor: "pointer" }}>{items.name}, 2020 г. </a>
                    <span className="col badge green-mark text-white fw-bold fs-5 mx-2 p-2">9.2</span>
                    <button className="col badge willSee text-white fw-bold fs-5 mx-2 p-2 border border-0">
                        Буду смотреть
                    </button>
                </div>
                <div className="container table text-start fs-4">
                    <div className="row text-white fw-bold fs-3">О фильме</div>
                    <div className="row">
                        <div className="col-xs-6 col-sm-3">Год производства</div>
                        <div className="col-xs-6 col-sm-3">1000</div>
                    </div>
                    <div className="row">
                        <div className="col-xs-6 col-sm-3">Страна</div>
                        <div className="col-xs-6 col-sm-3">Россия</div>
                    </div>
                    <div className="row">
                        <div className="col-xs-6 col-sm-3">Жанр</div>
                        <div className="col-xs-6 col-sm-3">Драма</div>
                    </div>
                    <div className="row">
                        <div className="col-xs-6 col-sm-3">Длительность</div>
                        <div className="col-xs-6 col-sm-3">189 мин. / 03:09</div>
                    </div>
                    <div className="row">
                        <div className="col-xs-6 col-sm-3">Возраст</div>
                        <div className="col-xs-6 col-sm-3">16+</div>
                    </div>
                </div>
                <h3 className="text-white fw-bold m-auto p-1 fs-3 text-start">Описание</h3>
                <div className="description text-start fs-4">
                    Пол Эджкомб — начальник блока смертников в тюрьме «Холодная гора», каждыйиз узников которого однажды проходит «зеленую милю» по пути к месту казни. Пол повидал много заключённых
                    и надзирателей за время работы. Однако гигант Джон Коффи, обвинённый в страшном преступлении,
                    стал одним из самых необычных обитателей блока.
                </div>
            </div>
            <hr className="border border-0 bg-black" />
            <div className="container">
                <h1 className="fs-1 fw-bold text-white ms-2 text-start">Трейлер</h1>
                <nav className="ratio ratio-16x9">
                    <iframe className="p-2" src="https://www.youtube.com/embed/Ca3mUSDJlgM" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                </nav>
            </div>
        </div>
    );

    return (
        <div>
            <ContentBlock valueBlock={content} title='Страница фильма' />
        </div>
    )
}