import { useEffect, useState } from "react"
import {useParams} from 'react-router-dom'
import {Swiper, SwiperSlide} from 'swiper/react'
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
import { BiSolidMap } from "react-icons/bi";

import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";


const Listing = () => {
    const [date, changeDate] = useState(new Date());
    function changeValue(val) {
        changeDate(val);
    }
    const [thumbsSwiper, setThumbsSwiper] = useState(null);
    const params = useParams();
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(false);
    const [listing, setListing] = useState(null);
    useEffect(() => {
        const fetchListing = async() =>{
            try {
                setLoading(true)
                const res = await fetch(`/server/listing/get/${params.listingId}`);
                const data = await res.json();
                if(data.success === false){
                    setError(true);
                    setLoading(false);
                    return;
                }
                setListing(data);
                setLoading(false);
                setError(false)

            } catch (error) {
                setError(true);
                setLoading(false);
            }  
        };
        fetchListing();
    }, [params.listingId]);


  return (
    <div>
        {loading && <p className="text-center my-10 text-xl text-blue-900">Loading...</p>}
        {error && <p className="text-center my-10 text-xl text-red-700">Something went wrong</p>}
        {listing && !loading && !error && 
        <>
        
        <Swiper style={{'--swiper-navigation-color': 'transparent', '--swiper-pagination-color': 'transparent',}} loop={true}  spaceBetween={10} navigation={true} thumbs={{ swiper: thumbsSwiper }} modules={[FreeMode, Navigation, Thumbs]} className="mySwiper2" >
            {listing.imageUrls.map(url =>
                <SwiperSlide key={url}><img src={url} alt="" className="rounded-sm md:my-1"/></SwiperSlide>
            )}
        </Swiper>
        <Swiper onSwiper={setThumbsSwiper} loop={true} spaceBetween={10} slidesPerView={5} freeMode={true} watchSlidesProgress={true} modules={[FreeMode, Navigation, Thumbs]} className="mySwiper"> 
            {listing.imageUrls.map(url =>
                <SwiperSlide key={url}><img src={url} alt="" /></SwiperSlide>
            )}    
        </Swiper>
        <div className="flex max-w-4xl mx-auto flex-col md:flex-row">
        <div className="flex flex-col p-4 gap-4 max-w-4xl md:max-w-2xl">
            <p className="text-2xl font-semibold mt-5 capitalize">
                {listing.name} - $ {''}
                {listing.offer ? listing.discountPrice.toLocaleString('en-US') : listing.currentPrice.toLocaleString('en-US')}
                {listing.type === 'rent' && ' / month'}
            </p>
            <p className='flex items-center mt-4 gap-2 text-gray-600 text-sm sm:text-md'><BiSolidMap className='text-blue-900 '/>{listing.address}</p>
            
            <div className='flex flex-col  justify-between gap-4'>
                <ul className='font-semibold text-sm flex flex-wrap items-center gap-2'>
                    <li className='flex items-center gap-2 whitespace-nowrap '>
                        <div className='text-lg'> {listing.bed > 1 ? `${listing.bed} beds ` : `${listing.bed} bed `}</div>
                    </li>
                    <li className='flex items-center gap-2 whitespace-nowrap '>
                        <div className='text-lg'> | {listing.bath > 1? `${listing.bath} baths ` : `${listing.bath} bath `}</div>
                    </li>
                    <li className='flex items-center gap-2 whitespace-nowrap '>
                        <div className='text-lg'> | {listing.parking ? 'Garage' : 'No Garage'}</div>
                    </li>
                    <li className='flex items-center gap-2 whitespace-nowrap '>
                        <div className='text-lg'> | {listing.furnished ? 'Furnished' : 'Unfurnished'}</div>  
                    </li>
                </ul>
                <div className="flex gap-2 text-center">
                    <p className='bg-red-900 w-full max-w-[80px] text-white text-center p-2 rounded-md text-xs'>{listing.type === 'rent' ? 'For Rent' : 'For Sale'}</p>
                    {listing.offer && (
                    <p className='bg-green-800 w-full max-w-[80px] text-white text-center p-2 rounded-md text-xs'>
                        ${+listing.currentPrice - +listing.discountPrice} Off </p>
                    )}
                </div>
            </div>
            <p className='text-slate-800 flex flex-col mb-6'>
              <span className='font-semibold text-black mt-4 mb-2 text-xl capitalize'>About this property</span>
              <span>{listing.description}</span>
            </p>
            <button onClick={() => window.location = 'mailto:chicagoland@example.com'} className='bg-blue-950 text-white rounded-md uppercase hover:opacity-95 p-2 mb-10 text-sm font-semibold'>Contact Agent</button>          
        </div>
        <div className="flex flex-col p-2 gap-2 mt-3 max-w-4xl md:max-w-2xl">
            <div className="border border-gray-300 p-4 rounded-md">
                <h2 className="text-xl text-blue-950 font-semibold capitalize md:text-start text-center">Schedule tour</h2>
                <h3 className="md:text-start text-center">What is your preferred tour date?</h3>
                <div className="mt-2 flex flex-col justify-center items-center">
                    <Calendar onChange = {changeValue} value = {date} />
                    <p className="mt-2 mb-6 text-center text-blue-700">The selected date is - {date.toLocaleDateString()}</p>
                </div>
                <button className="w-full bg-gray-300 rounded-md uppercase hover:opacity-95 p-2 text-sm font-semibold">Request tour</button>
            </div>
        </div>
        </div>
        </>
        }
    </div>
  )
}

export default Listing