Ergo/src/pages/Common/Booking/PropertyPage.jsx

import React, { useContext, useEffect } from "react";
import { useState } from "react";
import {
  Link,
  Navigate,
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";
import FaqAccordion from "@/components/frontend/FaqAccordion";
import ReviewCard from "@/components/frontend/ReviewCard";

import StarIcon from "@/components/frontend/icons/StarIcon";
import MkdSDK from "@/utils/MkdSDK";
import { callCustomAPI } from "@/utils/callCustomAPI";
import DateTimePicker from "@/components/frontend/DateTimePicker";
import { useForm } from "react-hook-form";
import { useBookingContext } from "./bookingContext";
import CustomSelect from "@/components/frontend/CustomSelect";
import { GlobalContext } from "@/globalContext";
import FavoriteButton from "@/components/frontend/FavoriteButton";
import Counter from "@/components/frontend/Counter";
import { Tooltip } from "react-tooltip";
import {
  usePropertyAddons,
  usePropertySpace,
  usePropertySpaceImages,
  usePublicUserData,
  usePropertySpaceAmenities,
  usePropertySpaceFaqs,
  usePropertySpaceReviews,
} from "@/hooks/api";
import PropertyImageSlider from "@/components/frontend/PropertyImageSlider";
import PropertySpaceMapImage from "@/components/frontend/PropertySpaceMapImage";
import AllReviewsModal from "@/components/frontend/AllReviewsModal";
import { AuthContext } from "@/authContext";
import CircleCheckIcon from "@/components/frontend/icons/CircleCheckIcon";

let sdk = new MkdSDK();

const PropertyPage = () => {
  const { dispatch: globalDispatch, state: globalState } =
    useContext(GlobalContext);
  const { state: authState, dispatch: authDispatch } = useContext(AuthContext);
  const { state: spaceData } = useLocation();
  const { bookingData, dispatch } = useBookingContext();
  const [galleryOpen, setGalleryOpen] = useState(false);
  const [reviewsPopup, setReviewsPopup] = useState(false);
  const [fetching, setFetching] = useState(true);
  const navigate = useNavigate();
  const { id } = useParams();
  const bookingDetails =
    bookingData?.from === ""
      ? bookingData
      : JSON.parse(localStorage.getItem("booking_details"));
  const [reviewDirection, setReviewDirection] = useState("DESC");
  const [bookedSlots, setBookedSlots] = useState([]);
  const [scheduleTemplate, setScheduleTemplate] = useState({});
  const [render, forceRender] = useState(false);
  const { handleSubmit, register, setValue } = useForm({
    defaultValues: bookingDetails,
  });

  const [showCalendar, setShowCalendar] = useState(false);

  const { propertySpace, notFound } = usePropertySpace(id, render);
  const hostData = usePublicUserData(propertySpace.host_id);
  const spaceImages = usePropertySpaceImages(
    propertySpace.id,
    true,
    setFetching
  );
  const spaceAddons = usePropertyAddons(propertySpace.property_id);
  const spaceAmenities = usePropertySpaceAmenities(propertySpace.id);
  const faqs = usePropertySpaceFaqs(propertySpace.id);
  const reviews = usePropertySpaceReviews(propertySpace.id);
  const [showMap, setShowMap] = useState(false);
  const { pathname } = useLocation();

  if (!fetching && spaceImages.length === 0) {
    navigate("*");
  }

  async function fetchBookedSlots(id) {
    try {
      const result = await callCustomAPI(
        "customer/schedule",
        "post",
        { property_spaces_id: id },
        "",
        null,
        "v3"
      );
      if (Array.isArray(result.list)) {
        setBookedSlots(result.list);
      }
    } catch (err) {
      globalDispatch({
        type: "SHOW_ERROR",
        payload: {
          heading: "Operation failed",
          message: err.message,
        },
      });
    }
  }

  async function fetchScheduleTemplate(id) {
    try {
      const result = await callCustomAPI(
        "property_spaces_schedule_template",
        "post",
        {
          page: 1,
          limit: 1,
          where: [`property_spaces_id = ${id}`],
        },
        "PAGINATE"
      );
      if (Array.isArray(result.list) && result.list.length > 0) {
        setScheduleTemplate({ custom_slots: result.list[0].custom_slots });
      }
      if (result.list[0]?.schedule_template_id) {
        const templateResult = await callCustomAPI(
          "schedule_template",
          "post",
          {
            page: 1,
            limit: 1,
            where: [`id = ${result.list[0].schedule_template_id}`],
          },
          "PAGINATE"
        );
        if (
          Array.isArray(templateResult.list) &&
          (templateResult.list[0] ?? {})
        ) {
          setScheduleTemplate((prev) => {
            let updated = { ...prev, ...templateResult.list[0] };
            return updated;
          });
        }
      }
    } catch (err) {
      globalDispatch({
        type: "SHOW_ERROR",
        payload: {
          heading: "Operation failed",
          message: err.message,
        },
      });
    }
  }

  function switchToCustomer() {
    authDispatch({ type: "SWITCH_TO_CUSTOMER" });
    globalDispatch({
      type: "SHOW_CONFIRMATION",
      payload: {
        heading: "Success",
        message: `You are now signed in as a customer`,
        btn: "Ok got it",
      },
    });
  }

  const onSubmit = async (data) => {
    if (!authState.isAuthenticated) {
      navigate(`/login?redirect_uri=${pathname}`);
      return;
    }

    if (authState.user == propertySpace.host_id) {
      globalDispatch({
        type: "SHOW_ERROR",
        payload: {
          heading: "error",
          message: "Owners can't book their own spaces",
        },
      });
      return;
    }

    if (globalState.user.verificationStatus != 1) {
      globalDispatch({ type: "OPEN_NOT_VERIFIED_MODAL" });
      return;
    }
    dispatch({
      type: "SET_BOOKING_DETAILS",
      payload: { ...data, ...propertySpace },
    });
    navigate("booking-preview");
  };

  useEffect(() => {
    if (isNaN(id)) return;
    fetchBookedSlots(id);
    fetchScheduleTemplate(id);

    // if (spaceImages.length === 0) {
    //   navigate("*")
    // }
  }, []);

  const sortByPostDate = (a, b) => {
    if (reviewDirection == "DESC") {
      return new Date(b.post_date) - new Date(a.post_date);
    }
    return new Date(a.post_date) - new Date(b.post_date);
  };

  if (notFound || isNaN(id)) return <Navigate to='/not-found' />;

  return (
    <div
      className='container mx-auto min-h-screen pt-[140px] text-sm normal-case md:text-base 2xl:px-16'
      onClick={() => {
        setShowCalendar(false);
      }}
    >
      <div className='mb-[18px] flex flex-col items-start justify-between px-[17px] md:flex-row md:items-center md:px-0'>
        <div className='flex flex-col items-start gap-4 normal-case md:flex-row md:items-center'>
          <h2 className='text-3xl font-semibold'>
            {propertySpace.name ?? spaceData?.name}
          </h2>
          <button
            className='whitespace-nowrap text-sm underline'
            target='_blank'
            onClick={() => setShowMap(true)}
          >
            (view on map)
          </button>
        </div>
        <div className='mt-[19px] flex w-full justify-center gap-4 md:mt-0 md:w-[unset]'>
          <p className='flex flex-grow items-center justify-center gap-2 rounded-sm border bg-[#F3F9F7] px-[14px] py-[10px]'>
            <StarIcon />
            <strong className='font-semibold'>
              {(
                Number(
                  propertySpace.average_space_rating ??
                    spaceData?.average_space_rating
                ) || 0
              ).toFixed(1)}
              <span className='font-normal'>
                (
                {propertySpace.space_rating_count ??
                  spaceData?.space_rating_count}
                )
              </span>
            </strong>
          </p>
          <div className='flex flex-grow items-center justify-center gap-2 rounded-sm border bg-[#F3F9F7] px-[14px] py-[10px]'>
            <FavoriteButton
              space_id={propertySpace.id}
              user_property_spaces_id={propertySpace.user_property_spaces_id}
              reRender={forceRender}
              withLoader={true}
              className='-mb-1'
              buttonClassName=''
              stroke='#344054'
              favColor={"black"}
            />
            <span>Save</span>
          </div>
        </div>
      </div>
      <div className='snap-scroll relative mb-[66px] flex h-[381px] gap-[32px] px-[14px] md:px-0'>
        {spaceImages[0]?.photo_url && (
          <img
            src={spaceImages[0]?.photo_url}
            className='h-full rounded-lg object-cover xl:min-w-[616px]'
          />
        )}
        {spaceImages[1]?.photo_url && (
          <img
            src={spaceImages[1]?.photo_url}
            className='h-full w-[292px] rounded-lg object-cover'
          />
        )}
        <div
          className={`${
            !spaceImages[3]?.photo_url ? "flex min-w-[550px] flex-col" : "block"
          } "gap-4 md:gap-[32px]" overflow-hidden`}
        >
          {spaceImages[2]?.photo_url && (
            <img
              src={spaceImages[2]?.photo_url}
              className={`${
                spaceImages[3]?.photo_url && "h-1/2"
              } "rounded-lg md:w-full" object-cover`}
            />
          )}
          {spaceImages[3]?.photo_url && (
            <img
              src={spaceImages[3]?.photo_url}
              className='h-1/2 rounded-lg object-cover md:w-full'
            />
          )}
        </div>
        {spaceImages[4]?.photo_url && (
          <img
            src={spaceImages[4]?.photo_url}
            className='h-full w-[292px] rounded-lg object-cover'
          />
        )}
        <button
          className='sticky right-6 mb-[8px] min-w-[170px] self-end border bg-[#00000080] px-3 py-1 text-center text-sm text-white'
          onClick={() => setGalleryOpen(true)}
        >
          View all photos ({spaceImages.length})
        </button>
      </div>
      <section className='relative mx-auto flex w-full flex-col items-start lg:w-[90%] xl:flex-row xl:gap-12'>
        <div className='w-full px-10 md:px-0 xl:w-3/5'>
          <h3 className='mb-[8px] text-2xl font-semibold'>Description</h3>
          <p className=''>
            {propertySpace.description ?? spaceData?.description}
          </p>
          <hr className='my-[32px] md:my-[47px]' />
          <h3 className='mb-[8px] text-2xl font-semibold'>Amenities</h3>
          <ul className='addons-grid list-disk-important'>
            {spaceAmenities.map((am, idx) => (
              <li
                className='mb-4 flex w-fit items-center gap-2 sm:mb-0'
                key={idx}
              >
                <CircleCheckIcon />
                {am.amenity_name}
              </li>
            ))}
          </ul>
          <hr className='my-[32px] md:my-[47px]' />
          <h3 className='mb-[8px] text-2xl font-semibold'>Add ons</h3>
          <ul className='addons-grid list-disk-important'>
            {spaceAddons.map((addon) => (
              <li
                className='mb-4 flex w-fit items-center gap-2 sm:mb-0 sm:w-full'
                key={addon.id}
              >
                <span className='w-fit'>
                  {" "}
                  <div className='flex gap-4'>
                    <CircleCheckIcon /> {addon.add_on_name}
                  </div>{" "}
                </span>{" "}
                <strong className='font-semibold'>${addon.cost}/h</strong>
              </li>
            ))}
          </ul>
          <hr className='my-[32px] md:my-[47px]' />
          <div className='mb-[28px] flex flex-wrap items-center justify-between'>
            <h3 className='mb-2 text-xl font-semibold md:mb-0 md:text-2xl'>
              About the host
            </h3>
            {authState.role == "customer" && propertySpace?.id && (
              <Link
                to={`/account/messages?other_user_id=${propertySpace.host_id}&space=${propertySpace.id}`}
                className='my-text-gradient hidden w-[178px] whitespace-nowrap rounded-md border border-[#33D4B7] px-6 py-2 text-center font-semibold md:inline'
                id='contact-host'
              >
                Contact the host
              </Link>
            )}
          </div>
          <div className='flex items-center justify-between gap-4 md:justify-start md:gap-[24px]'>
            <div className='w-max-content'>
              <img
                src={hostData.photo ?? "/default.png"}
                className='h-[72px] w-[72px] rounded-full object-cover'
              />
            </div>
            <div className='w-[90%] space-y-3'>
              <p className='hidden text-xl font-bold md:block'>
                {propertySpace.first_name}
              </p>
              <p className='hidden md:block'>
                {propertySpace.about ?? spaceData?.about}
              </p>
            </div>
            {authState.role == "customer" && propertySpace?.id && (
              <Link
                to={`/account/messages?other_user_id=${propertySpace.host_id}&space=${propertySpace.id}`}
                className='my-text-gradient inline whitespace-nowrap rounded-md border border-[#33D4B7] px-4 py-1 text-center text-sm font-semibold md:hidden'
                id='contact-host'
              >
                Contact the host
              </Link>
            )}
          </div>
          <p className='mt-4 block md:hidden'>
            {propertySpace.about ?? spaceData?.about}
          </p>

          <hr className='my-[32px] md:my-[47px]' />
          <div className='mb-[18px] flex items-center justify-between'>
            <h3 className='mb-[8px] text-2xl font-semibold'>Reviews</h3>
            <CustomSelect
              options={[
                { label: "By Date: Newest First", value: "DESC" },
                { label: "By Date: Oldest First", value: "ASC" },
              ]}
              onChange={setReviewDirection}
              accessor='label'
              valueAccessor='value'
              className='min-w-[200px]'
              listOptionClassName={"pl-4"}
            />
          </div>
          <section>
            {reviews.length == 0 && <p>No reviews yet</p>}
            {reviews
              .sort(sortByPostDate)
              .slice(0, 10)
              .map((rw) => (
                <ReviewCard key={rw.id} data={rw} />
              ))}
            <div className='text-center'>
              {reviews.length > 10 ? (
                <button
                  className='font-semibold underline'
                  onClick={() => setReviewsPopup(true)}
                >
                  View more ({reviews.length})
                </button>
              ) : null}
            </div>
          </section>
          <hr className='my-[32px] md:my-[47px]' />
          <h3 className='mb-[8px] text-2xl font-semibold'>FAQs</h3>
          {faqs.map((faq) => (
            <FaqAccordion key={faq.id} data={faq} />
          ))}
          <hr className='my-[32px] md:my-[47px]' />
          <h3 className='mb-4 text-2xl font-semibold'>Property rules</h3>
          <p className='mb-32'>{propertySpace.rule ?? spaceData?.rule}</p>
        </div>
        <div className='sticky bottom-0 ml-24 hidden w-full flex-grow bg-white xl:bottom-[unset] xl:top-16 xl:block xl:w-[unset]'>
          <div className='sticky-price-summary mx-auto max-w-2xl p-6 md:border-2'>
            <h3 className='mb-[8px] text-2xl font-semibold'>
              Price and availability
            </h3>
            <div className='mb-[13px] flex justify-between'>
              <span className='text-lg'>Max capacity</span>
              <span>
                {" "}
                <strong className='font-semibold'>
                  {propertySpace.max_capacity ?? spaceData?.max_capacity}
                </strong>{" "}
                people
              </span>
            </div>
            <div className='mb-[13px] flex justify-between'>
              <span className='text-lg'>Pricing from</span>
              <span>
                from:{" "}
                <strong className='font-semibold'>
                  ${propertySpace.rate ?? spaceData?.rate}
                </strong>
                /h
              </span>
            </div>

            <form className='flex flex-col' onSubmit={handleSubmit(onSubmit)}>
              <div className='mb-[13px] flex items-center justify-between'>
                <span className='text-lg'>Number of guests</span>
                <Counter
                  register={register}
                  name='num_guests'
                  setValue={setValue}
                  initialValue={bookingDetails.num_guests || 1}
                  maxCount={
                    propertySpace.max_capacity ?? spaceData?.max_capacity
                  }
                  minCount={1}
                />
              </div>
              <hr className='mb-[24px] hidden md:block' />
              <div className='z-50 mb-3'>
                <DateTimePicker
                  register={register}
                  setValue={setValue}
                  fieldNames={["selectedDate", "from", "to"]}
                  showCalendar={showCalendar}
                  setShowCalendar={setShowCalendar}
                  fromDefault={bookingDetails.from}
                  toDefault={bookingDetails.to}
                  bookedSlots={bookedSlots}
                  scheduleTemplate={scheduleTemplate}
                  defaultDate={bookingDetails.selectedDate || undefined}
                />
              </div>
              {authState.role != "customer" && authState.isAuthenticated ? (
                <button
                  type='button'
                  onClick={switchToCustomer}
                  className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
                >
                  Join as customer to book
                </button>
              ) : (
                <button
                  type='submit'
                  id='proceed-to-preview'
                  className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
                  disabled={(() => {
                    const el = document.getElementById("booking-time");
                    return !(el && !el.innerText.includes("Select"));
                  })()}
                >
                  {window.innerWidth > 500
                    ? "Continue"
                    : "Continue to checkout"}
                </button>
              )}
            </form>
          </div>
        </div>
        <div className='mx-auto -mt-16 block w-full max-w-xl p-6 xl:hidden'>
          <h3 className='mb-[8px] text-2xl font-semibold'>
            Price and availability
          </h3>
          <div className='mb-[13px] flex justify-between'>
            <span className='text-lg'>Max capacity</span>
            <span>
              {" "}
              <strong className='font-semibold'>
                {propertySpace.max_capacity ?? spaceData?.max_capacity}
              </strong>{" "}
              people
            </span>
          </div>
          <div className='mb-[13px] flex justify-between'>
            <span className='text-lg'>Pricing from</span>
            <span>
              from:{" "}
              <strong className='font-semibold'>
                ${propertySpace.rate ?? spaceData?.rate}
              </strong>
              /h
            </span>
          </div>

          <form className='flex flex-col' onSubmit={handleSubmit(onSubmit)}>
            <div className='mb-[13px] flex items-center justify-between'>
              <span className='text-lg'>Number of guests</span>
              <Counter
                register={register}
                name='num_guests'
                setValue={setValue}
                initialValue={bookingDetails.num_guests || 1}
                maxCount={propertySpace.max_capacity ?? spaceData?.max_capacity}
                minCount={1}
              />
            </div>
            <hr className='mb-[24px] hidden md:block' />
            <div className='z-50 mb-3'>
              <DateTimePicker
                register={register}
                setValue={setValue}
                fieldNames={["selectedDate", "from", "to"]}
                showCalendar={showCalendar}
                setShowCalendar={setShowCalendar}
                fromDefault={bookingDetails.from}
                toDefault={bookingDetails.to}
                bookedSlots={bookedSlots}
                scheduleTemplate={scheduleTemplate}
              />
            </div>
            {authState.role != "customer" && authState.isAuthenticated ? (
              <button
                type='button'
                onClick={switchToCustomer}
                className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
              >
                Join as customer to book
              </button>
            ) : (
              <button
                type='submit'
                id='proceed-to-preview'
                className='login-btn-gradient gap-2 rounded-sm px-2 py-3 text-center tracking-wide text-white outline-none focus:outline-none'
                disabled={(() => {
                  const els = document.querySelectorAll("#booking-time");
                  return Array.from(els).every((el) =>
                    el.innerText.includes("Select")
                  );
                })()}
              >
                {window.innerWidth > 500 && "Continue"}
                {window.innerWidth < 500 && "Continue to checkout"}
              </button>
            )}
          </form>
        </div>
      </section>
      <PropertyImageSlider
        spaceImages={spaceImages}
        modalOpen={galleryOpen}
        closeModal={() => setGalleryOpen(false)}
      />
      <AllReviewsModal
        modalOpen={reviewsPopup}
        closeModal={() => setReviewsPopup(false)}
        reviews={reviews}
        onDirectionChange={setReviewDirection}
      />
      <Tooltip
        anchorId='proceed-to-preview'
        place='bottom'
        content={"Proceed to book"}
        noArrow
      />
      <Tooltip
        anchorId='contact-host'
        place='bottom'
        content={"Chat with Host"}
        noArrow
      />
      <PropertySpaceMapImage
        modalImage={`https://maps.googleapis.com/maps/api/staticmap?center=${
          propertySpace.address_line_1 ?? ""
        },${propertySpace.address_line_2 ?? ""},${propertySpace.city ?? ""},${
          propertySpace.country ?? ""
        }&zoom=15&size=600x400&maptype=roadmap&markers=color:red|${
          propertySpace.address_line_1 ?? ""
        },${propertySpace.address_line_2 ?? ""}
      &key=${import.meta.env.VITE_GOOGLE_API_KEY}`}
        modalOpen={showMap}
        closeModal={() => setShowMap(false)}
      />
    </div>
  );
};

export default PropertyPage;