'use client'
import Image from 'next/image'
import './globals.css'
import Logo from '../images/logo.png'
import Burger1 from '../images/burger-1.png'
import React, { useEffect } from 'react'
import axios from 'axios'
import Product from '@/components/product'

function sleep(ms: number) {
  return new Promise(resolve=> setTimeout(resolve, ms))
}

export default function Home() {
  const [position, setPosition] = React.useState({one: '',two: '', opacitye: '100'})
  const [position2, setPosition2] = React.useState(0)
  const [products, setProducts] = React.useState<{ id: string; title: string; price: number; description: string; imageUri: string; }[]>([])

  const getProducts = async () => {
    const request = axios.get('http://localhost:8080/api/products/get').then((request) => {
      const data = request.data
      setProducts(data.products)
    }).catch(console.error)
  }
  getProducts()
  const handlePosition = async (percentage: number) => {
    setPosition({one: `translate-x-[-100%]`, two: '', opacitye: '0'});
    await sleep(2000);
    (document.getElementById('shop_modal') as HTMLDialogElement)?.showModal()
  }
  const closeModal = () => {
    setPosition({one: 'left-0', two: '', opacitye: '100'});
    (document.getElementById('cart_modal') as HTMLDialogElement)?.close();
    (document.getElementById('shop_modal') as HTMLDialogElement)?.close()
  }
  const openCart = async () => {
    setPosition({one: position.one, two: 'translate-x-[100%]', opacitye: position.opacitye})
    await sleep(2000);
    (document.getElementById('cart_modal') as HTMLDialogElement)?.showModal()
  }
  return (
    <div className="flex justify-center items-center h-screen w-screen font-roboto">
      <div className={`flex justify-center lg:justify-end items-center lg:items-end min-h-screen m-0 w-screen flex-row`}>
        <div className={`w-7/12 left-0 lg:absolute p-24 transition duration-[2000ms] flex justify-center items-start min-h-screen flex flex-col bg-primary text-white ${position.one}`}>
          <h1 className="text-5xl font-roboto-black">Bringing deliciousity to your doorstep.</h1>
          <p className='mt-2 text-lg'>Order a burger now for an exclusive <span className='roboto-bold'>25% OFF</span>. Offer ends this Friday! Experience the delight of having a Big Belly Burger!</p>
          <button onClick={()=>handlePosition(position2)} className='mt-8 p-3 bg-white text-primary font-roboto-black transition duration-500 hover:scale-110 hover:bg-secondary'>Order a Big Belly Burger!</button>
        </div>
        <div className={`w-5/12 lg:r-0 hidden lg:flex transition duration-[2000ms] justify-center items-center h-full bg-secondary min-h-screen ${position.two}`}>
          <Image width={400} height={400} src={Logo} alt={'Logo'} className='transition duration-300 hover:rotate-[-25deg] hover:scale-110'></Image>
        </div>
      </div>
      <dialog onClose={()=>closeModal()} id="cart_modal" className="modal modal-bottom sm:modal-middle bg-primaryLight lg:w-5/12 lg:bg-primary lg:absolute lg:right-0 bg-white">
        <div className={`p-8 rounded bg-primary text-white rounded-t-3xl lg:rounded-none lg:w-full h-[calc(100vh-6rem)] overflow-y-auto r-0 absolute`}>
          <h3 className="font-roboto-bold text-3xl text-center">Order a Big Cart Burger!</h3>
          <p className="py-4 font-roboto text-center">Check our amazing menu and order the delicious burger you deserve.</p>
          <div className='flex justify-center items-center p-4 px-0 flex-row flex-wrap'>
            {products.map((product) => (
                <Product id={product.id} text={product.title} price={`${product.price}`}desc={product.description} imageUri={product.imageUri}/>
              ))
            }
          </div>
          <div className="modal-action">
            <form method="dialog">
              <button className="btn bg-primary text-white border-none text-black transition duration-500 hover:bg-primary hover:scale-110 rounded-none" onClick={closeModal}>Close</button>
            </form>
              <button className="btn bg-white text-primary border-none text-black transition duration-500 hover:bg-secondary hover:text-black hover:scale-110 rounded-none ml-4" onClick={openCart}>Continue To Cart</button>
          </div>
        </div>
      </dialog>
      <dialog onClose={()=>closeModal()} id="shop_modal" className="modal modal-bottom sm:modal-middle bg-primaryLight  lg:w-7/12 lg:bg-primary">
        <div className={`p-8 rounded bg-primary text-white rounded-t-3xl lg:rounded-none lg:w-full h-[calc(100vh-6rem)] overflow-y-auto`}>
          <h3 className="font-roboto-bold text-3xl text-center">Order a Big Belly Burger!</h3>
          <p className="py-4 font-roboto text-center">Check our amazing menu and order the delicious burger you deserve.</p>
          <div className='flex justify-center items-center p-4 px-0 flex-row flex-wrap'>
            {products.map((product) => (
                <Product id={product.id} text={product.title} price={`${product.price}`}desc={product.description} imageUri={product.imageUri}/>
              ))
            }
          </div>
          <div className="modal-action">
            <form method="dialog">
              <button className="btn bg-primary text-white border-none text-black transition duration-500 hover:bg-primary hover:scale-110 rounded-none" onClick={closeModal}>Close</button>
            </form>
              <button className="btn bg-white text-primary border-none text-black transition duration-500 hover:bg-secondary hover:text-black hover:scale-110 rounded-none ml-4" onClick={openCart}>Continue To Cart</button>
          </div>
        </div>
      </dialog>
    </div>
  );
}