import React, {useEffect, useState} from "react";

import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa";
import { LuShoppingBasket } from "react-icons/lu";
import { FaMagnifyingGlass } from "react-icons/fa6";
import { CiHeart } from "react-icons/ci";
import { FaRegEye } from "react-icons/fa";
import { CiShare2 } from "react-icons/ci";
import { useNavigate } from "react-router-dom";
import './ChocolateBlanco.css';
import Swal from 'sweetalert2'
import axios from 'axios';
import StarRatings from 'react-star-ratings';

function PastelFrambuesa() {
  const navigate = useNavigate();
  const [datosFormulario, setDatosFormulario] = useState(
		{correo: '',
		password: '',
		nombre: ''
	});

  const redirectPersonalizarPastelArcoiris = () => {
    // Redirige a la página del hotel cuando se hace clic en el botón
    navigate("/PersonalizarPastel/PastelArcoiris");
    };
  
    const redirectToPedidos = () => {
    navigate("/Pedidos");
  
    };
  
    const redirectToPasteles = () => {
    navigate("/Pasteles");
    };
  
    const redirectInicio = () => {
    // Redirige a la página del hotel cuando se hace clic en el botón
    navigate("/");
    };
  
    const redirectToLogin = () => {

      navigate("/Login");
      };

    
	  const mostrarAlertaLogOut = () => {
      Swal.fire({
        title: "Cerrar Sesión",
        text: "¿Seguro que quieres cerrar sesión?",
        icon: "warning",
        showCancelButton: true, // Mostrar el botón de cancelar
        confirmButtonColor: "#3085d6", // Color del botón de confirmar
        cancelButtonColor: "#d33", // Color del botón de cancelar
        confirmButtonText: "Sí", // Texto del botón de confirmar
        cancelButtonText: "No", // Texto del botón de cancelar
      }).then((result) => {
        if (result.isConfirmed) {
        Swal.fire({
          text: "Sesión cerrada correctamente. Adiós " + nombreUsuario + "",
          icon: "success",
        });
        cerrarSesion();
        }
      });
      };
    
      const [nombreUsuario, setNombreUsuario]=useState("");
  
      const obtenerNombreUsuario = async () => {
      try {
        // Realizar la llamada al backend para obtener el nombre del usuario
        const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario });
        setNombreUsuario(response.data.nombre);
        console.log(nombreUsuario);
  
      } catch (error) {
        // Manejar el error según tus necesidades
        console.error("Error al obtener el nombre del usuario", error);
      }
      };
    
      useEffect(() => {
      // Llamar a la función al cargar la página
      obtenerNombreUsuario();
      obtenerReseñasPorPastel();
      mostrarReseñas();
      }, []); 
    
      const cerrarSesion = async () => {
      try {
        // Realizar la llamada al backend para obtener el nombre del usuario
        const response = await axios.post('http://localhost:4567/frontend/cerrarSesion', { datosFormulario });
        setNombreUsuario(response.data.nombre);
        console.log(nombreUsuario);
        obtenerNombreUsuario();
        //mostrarAlertaLogOut();
      } catch (error) {
        // Manejar el error según tus necesidades
        console.error("Error al obtener el nombre del usuario", error);
      }
      };


      const mostrarAlertaReservaFallidaPers=()=>{
        Swal.fire({
          title: "Pedidos Info",
          text: "No se encuentra disponible.",
          icon: "info",
          button: "Aceptar"
    
        });
      };

      const mostrarAlertaReservaExitosa=()=>{
        Swal.fire({
          title: "Pedido Exitosa",
          text: "Tu Pedido se ha realizado correctamente.",
          icon: "success",
          button: "Aceptar"
    
        });
      };
  

      const hacerPedidoPastel1 = async () => {  


        try{

          if(nombreUsuario==null){
            mostrarAlertaPedidoFallidaLogin();
            
          }else{

            const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
              textoEncima: "",
              textoCantidad: "12",
              textoRelleno: "Vanilla Rainbow Cake",
              textoTipo: "Pastel Frambuesa",
              textoPrecio:"500",
              idPastel: "7"
            });

          mostrarAlertaReservaExitosa();

          }

        }catch(error){
          console.error("Error al hace el pedido");
          throw error;

        }



      };

      

      const [reseñas, setReseñas] = useState([]);
      const [datosFormularioReseña, setDatosFormularioReseña] = useState(
          {contenido: '',
          estrellas: 5
      });


      const handleInputChange = (e) => {
        const { name, value } = e.target;
        setDatosFormularioReseña({
          ...datosFormularioReseña,
          [name]: value,
        });
      };

      const enviarReseña = async (e) => {
        e.preventDefault();
        await agregarReseña();
        await obtenerReseñasPorPastel("7"); // Obtener las reseñas nuevamente para actualizar la lista
      };


      const agregarReseña = async () => {  
        console.log("Agregando reseña"); 
        console.log(datosFormularioReseña.contenido);
        console.log(datosFormularioReseña.estrellas);
        console.log(nombreUsuario)
    
        try{
            if(nombreUsuario==null){
                mostrarAlertaReseñaFallidaLogin();
            }else{
                const response = await axios.post('http://localhost:4567/frontend/agregarResenia', {
                    nombreUsuario: nombreUsuario,
                    idPastel: "7", // Asegúrate de tener el id del pastel
                    contenido: datosFormularioReseña.contenido,
                    estrellas: datosFormularioReseña.estrellas,
                });
    
                console.log(response.data);
                //mostrarAlertaReseñaExitosa();
                console.log("reseña exitosa");
                console.log("")    
                // Limpiar los estados después de agregar la reseña
                setDatosFormularioReseña({ contenido: "", estrellas: 0 });
            }
        }catch(error){
            console.error("Error al agregar la reseña");
            throw error;
        }

             
    };


    const obtenerReseñasPorPastel = async (idPastel) => {
      try {
        const response = await axios.post('http://localhost:4567/frontend/obtenerReseniasPorPastel', {
          idPastel: "7",
        });
        console.log("Reseñas obtenidas:", response.data.reseñas);
        const reseñasTransformadas = response.data.reseñas.map(reseña => ({
          idReseña: reseña.id_reseña,
          nombreUsuario: reseña.nombre_usuario,
          idPastel: reseña.id_pastel,
          contenido: reseña.contenido,
          estrellas: reseña.estrellas,
        }));
    
        setReseñas(reseñasTransformadas);
      } catch (error) {
        console.error("Error al obtener reseñas:", error);
      }
    };
    
    const mostrarReseñas = () => {
      if (!nombreUsuario) {
        return (
          <h1 className="IniSesReserva">Inicia Sesión para poder ver las reseñas.</h1>
        );
      } else {
        if (reseñas.length === 0) {
          return (
            <h1 className="ReseñaNull">No hay reseñas para este pastel en este momento.</h1>
          );
        } else {
          return (
            <div className="flex justify-center space-x-4">
              {reseñas.map(reseña => (
                <div key={reseña.idReseña} className="customer-review-card">
                  <div className="customer-review-info">
                    <img className="customer-review-avatar" src="https://placehold.co/100x100" />
                    <div>
                      <div className="customer-review-name">{reseña.nombreUsuario}</div>
                    </div>
                  </div>
                  <div className="customer-review-rating">
                    {"★".repeat(reseña.estrellas)}{"☆".repeat(5 - reseña.estrellas)}
                  </div>
                  <p className="customer-review-content">
                    {reseña.contenido}
                  </p>
                </div>
              ))}
            </div>
          );
        }
      }
    };


  return (
    <>

<header>

<div className="container-hero">
  <div className="container hero">
    <div className="customer-support">
          <RiCustomerService2Fill className="icono-cliente" />
      <div className="content-customer-support">

        <span className="text">Soporte al cliente</span>
        <span className="number">123-456-7890</span>
        
      </div>
    </div>

    <div className="container-logo">
      <i className="fa-solid fa-mug-hot"></i>
      <h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
    </div>

    <div className="container-user">
        <FaUser className="icono-User"/>

      <div className="content-shopping-cart">

      </div>
    </div>
  </div>
</div>


<div className="container-navbar">
  <nav className="navbar container">
    <i className="fa-solid fa-bars"></i>
    <ul className="menu">
    <li><a href="#" onClick={redirectInicio}>Inicio</a></li>
						<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
						<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
						<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
						<li><a href="#">Blog</a></li>
            {nombreUsuario ? (
								<>
								<li className="enlaceNombre"><a href="#">{nombreUsuario}</a></li>
								<li className="enlaceNombre2"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li>
								</>
							) : (
								<li className="enlaceNombre2"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li>
							)
						}
    </ul>

    <form className="search-form">
      <input type="search" placeholder="Buscar..." />
      <button className="btn-search">
        <FaMagnifyingGlass className="icono-lupa" />
      </button>
    </form>
  </nav>
</div>


</header>

      <main className = "main-pers-pastel">
        <div className="container-img-6" >
            {}
        </div>
        <div className="container-info-product">
          <div className="container-price">
            
            <h1 className="titulo-Pastel">Pastel De Frambuesa</h1>
            <i className="fa-solid fa-angle-right"></i>
          </div>

          <div className="container-details-product">
            <div className="form-group">
                <div className="OpcionesPers">
                <h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1"><strong>$500</strong></p>

                <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Grande</strong></p>

                <h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Vanilla Rainbow Cake</strong></p>

                <div className="mb-4">
                </div>
                <div className="mb-6">
                    
                </div>
                </div>
            </div>
          </div>

          <div className="container-add-cart">
          <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
              <i className="fa-solid fa-plus"></i>
              Comprar
            </button>
          </div>

          <div className="container-description">
            <div className="title-description">
              <h4>Descripción</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-description">
              <p>
              Este es un delicioso pastel de terciopelo rojo con glaseado blanco y chispas. El pastel es de un color rojo intenso y tiene una textura suave y húmeda. El glaseado blanco es cremoso y dulce, y las chispas añaden un toque de color y diversión.
              </p>
            </div>
          </div>

          <div className="container-additional-information">
            <div className="title-additional-information">
              <h4>Información adicional</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-additional-information hidden">
              <p>-----------</p>
            </div>
          </div>

          <div className="container-reviews">
            <div className="title-reviews">
              <h4>Reseñas</h4>
              <i className="fa-solid fa-chevron-down"></i>
            </div>
            <div className="text-reviews hidden">
              <p>-----------</p>
            </div>
          </div>


        </div>
      </main>





      <div className="Reseñas">

      <h2 className="customer-reviews-title">Reseñas</h2>

      <div className="estrellas-reviews-container"> 
      <h1>Calificación:</h1>
      <StarRatings
            rating={datosFormularioReseña.estrellas}
            starRatedColor="#4b1e29"
            starHoverColor="#8B374A"
            changeRating={(newRating) => setDatosFormularioReseña({...datosFormularioReseña, estrellas: newRating})}
            numberOfStars={5}
            name='rating'
            starDimension="30px"
        />
      </div>
      <div className="customer-reviews-container">    
      <div className="reseñas-conteiner">
          <input className="input-reseñas"
          type="text"
          name="contenido"
          value={datosFormularioReseña.contenido}
          onChange={handleInputChange}
          placeholder="Escribe tu reseña aquí"></input>


        

          <button className="boton-reseñas" onClick={enviarReseña}>Enviar</button>
        </div>  
        {mostrarReseñas()}
      
      </div>

      </div>



      

      <footer className="footer">
			<div className="container container-footer">
				<div className="menu-footer">
					<div className="contact-info">
						<p className="title-footer">Información de Contacto</p>
						<ul>
							<li>
								Avenida Xalapa 
							</li>
							<li>Teléfono: 2288520821</li>
							<li>EmaiL: cdgn_17@hotmail.com</li>
						</ul>
						<div className="social-icons">
							<span className="facebook">
								<i className="fa-brands fa-facebook-f"></i>
							</span>
							<span className="twitter">
								<i className="fa-brands fa-twitter"></i>
							</span>
							<span className="youtube">
								<i className="fa-brands fa-youtube"></i>
							</span>
							<span className="pinterest">
								<i className="fa-brands fa-pinterest-p"></i>
							</span>
							<span className="instagram">
								<i className="fa-brands fa-instagram"></i>
							</span>
						</div>
					</div>

					<div className="information">
						<p className="title-footer">Información</p>
						<ul>
							<li><a href="#">Acerca de Nosotros</a></li>
							<li><a href="#">Información de Entrega</a></li>
							<li><a href="#">Politicas de Privacidad</a></li>
							<li><a href="#">Términos y condiciones</a></li>
							<li><a href="#">Contactános</a></li>
						</ul>
					</div>

					<div className="my-account">
						<p className="title-footer">Mi cuenta</p>

						<ul>
							<li><a href="#">Mi cuenta</a></li>
							<li><a href="#">Pedidos</a></li>
							<li><a href="#">Boletín</a></li>
						</ul>
					</div>


				</div>

				<div className="copyright">


				</div>
			</div>
		</footer>
    </>
  );
}

export default PastelFrambuesa;