import React, { useEffect, useState } from "react";
import axios from "axios";
import Header from "../Header/Header";
import Card from "../Card/Card";
import Footer from "../Footer/Footer";

const Main = ({ userData }) => {

    const [films, setFilms] = useState([]);
    const [attract, setAttract] = useState([]);
    const [hotel, setHotel] = useState([]);

    const optionsFilms = {
        method: 'GET',
        url: `https://easytravel.zetcraft.ru/v1/GetAllFilmsInCity/${userData.selectedCity}`,
    };

    const optionsAttract = {
        method: 'GET',
        url: `https://easytravel.zetcraft.ru/v1/GetAllAttractionsInCity/${userData.selectedCity}`,
    };

    const optionsHotel = {
        method: 'GET',
        url: `https://easytravel.zetcraft.ru/v1/GetAllHotelsInCity/${userData.selectedCity}`,
    };

    useEffect(() => {
        axios.request(optionsFilms).then(function (response) {
            setFilms(response.data);
        }).catch(function (error) {
            console.error(error);
        });
    }, []);

    useEffect(() => {
        axios.request(optionsAttract).then(function (response) {
            setAttract(response.data);
        }).catch(function (error) {
            console.error(error);
        });
    }, []);

    useEffect(() => {
        axios.request(optionsHotel).then(function (response) {
            setHotel(response.data);
        }).catch(function (error) {
            console.error(error);
        });
    }, []);

    return (
        <div style={{paddingTop:'70px'}}>
        <Header />
        <Card city={userData.selectedCity}/>
        <div style={{
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            marginTop: 10
        }}>
            <h2>Кино по пушкинской карте</h2>
            <div style={{
                width: '100%',
                overflowX: 'auto',
                display: 'flex',
                justifyContent: 'center',
                marginTop: 20
            }}>
                <ul style={{
                    display: 'flex',
                    listStyle: 'none',
                    padding: 0,
                }}>
                    {films.map((film, index) => (
                        <li key={index} style={{
                            padding: '10px',
                            marginRight: '30px',
                        }}>
                            <a href={film.url} style={{ textDecoration: 'none', color: 'inherit' }}>
                            <div key={index} style={{
                                height: 200,
                                width: 140,
                                display: 'flex',
                                alignContent: 'center',
                                flexDirection: 'column',
                                borderRadius: '10px',
                                boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)' 
                            }}>
                            <div style={{
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'center',
                            }}>
                                <img src={film.imageURL} alt="#" style={{
                                    height: 110,
                                    width: 79,
                                    marginTop: 10,
                                    borderRadius: 10
                                }}/>
                                <div style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    width: 80,
                                }}>{film.filmName}</div>
                            </div>
                        </div>
                    </a>
                </li>
                ))}
            </ul>
            </div>

            <h2 style={{
                marginTop: 20,
                marginBottom: 20
            }}>Достопримечательности</h2>
            <ul style={{
                    display: 'flex',
                    flexDirection: 'column',
                    listStyle: 'none',
                    padding: 0,
                    marginTop: 20,
                    marginLeft: 55,
                    gap: 20,
                }}>
                {attract.map((attr, index) => (
                    <li key={index}>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 20,
                            width: 400,
                        }}>
                            <img src={attr.imageURL} alt="#" style={{
                                height: '92px',
                                width: '107px',
                                borderRadius: '10px'
                            }}/>
                            <div style={{
                                width: 150
                            }}>{attr.name}</div>
                            <button style={{
                                height: 33,
                                width: 33,
                                backgroundColor: 'rgb(0,0,0,0)',
                                border: 'none'
                            }} onClick={() => {
                                window.open(`https://taxi.yandex.ru/?utm_source&utm_medium&gfrom=%2C&gto=47.213123%2C38.938103&ref&level&city&tariff&referrer=appmetrica_tracking_id%3D1178268795219780156%26ym_tracking_id%3D2217839191706395275`)
                            }}><img src="./pngwing 7.png" alt="#" /></button>
                        </div>
                    </li>    
                ))}
            </ul>

            <h2 style={{
                marginBottom: 20,
                marginTop: 20,
            }}>Отели</h2>
            <ul style={{
                    display: 'flex',
                    flexDirection: 'column',
                    listStyle: 'none',
                    padding: 0,
                    marginTop: 20,
                    gap: 20,
                }}>
                {hotel.map((hotelItem, index) => (
                    <li key={index}>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 20

                        }}>
                            <img src={hotelItem.imageURL} alt="#" style={{
                                height: 119,
                                width: 184,
                                borderRadius: 10,
                            }}/>
                            <div style={{
                                display: 'flex',
                                flexDirection: 'column',
                                height: 20,
                                width: 150,
                                alignItems: 'center',
                            }}>
                                <div>{hotelItem.name}</div>
                                <div>{hotelItem.price} ₽</div>
                            </div>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
        <Footer />
        </div>
    );
}

export default Main;