"use client";
/* The SearchDate component appears to be a part of a property listing form */
import React, { forwardRef, useState } from "react";
import styles from "./SearchDate.module.scss"
import DatePicker from "react-datepicker";
import { DATE_FORMAT } from "@/src/utils/commonVariables";

const SearchDate: React.FC = () => {
  const [weeks, setWeeks] = useState<number>(1);
  const [checkInDate, setCheckInDate] = useState<Date | null>(new Date());
  const [checkOutDate, setCheckOutDate] = useState<Date | null>(new Date());

  /**
   * Custom input component for the date picker
   * @param {string} value - The value of the date picker
   * @param {function} onClick - The function to handle the click event
   * @param {string} className - The class name of the date picker
   * @param {React.RefObject<HTMLButtonElement>} ref - The ref of the date picker
   */
  const ExampleCustomInput = forwardRef<HTMLButtonElement, { value: string; onClick: () => void; className: string }>(
    ({ value, onClick, className }, ref) => (
      <button type="button" className={className} onClick={onClick} ref={ref}>
        <span className="fs-14 font-fw500 text-blackColor">{value}</span>
      </button>
    )
  );
  // Set the display name of the ExampleCustomInput component
  ExampleCustomInput.displayName = 'ExampleCustomInput';
  /**
   * Handle the change event of date picker
   */
  const handleCheckInChange = (date: Date | null) => {
    setCheckInDate(date);
  };

  /**
   * Handle the change event of date picker
   */
  const handleCheckOutChange = (date: Date | null) => {
    setCheckOutDate(date);
  };

  return (
    <>
      {/* Main box wrapper */}
      <div className={`boxWrapper`}>
        {/* Title wrapper */}
        <div className={`titleWrapper`}>
          <h6>Date</h6>
        </div>
        {/* Calender boxes main */}
        <div className="mainDateBox">
          {/* Individual calender box */}
          <div className="flex flex-col gap-3 md:gap-4">
            {/* Check-in Field */}
            <div className={`flex items-center justify-between rounded-full gap-3 ${styles.field}`}>
              <div className={`flex items-center gap-2 text-sm ${styles.icon}`}>
                <i className="Icon IconDate"></i> Check in
              </div>
              <DatePicker
                selected={checkInDate}
                onChange={handleCheckInChange}
                dateFormat={DATE_FORMAT}
                minDate={new Date()}
                customInput={<ExampleCustomInput value={checkInDate?.toLocaleDateString() || ""} onClick={() => { }} className={styles.input} />}
                className={`border-none outline-none bg-transparent cursor-pointer relative text-right ${styles.input}`}
              />
            </div>

            {/* Check-out Field */}
            <div className={`flex items-center justify-between p-3 rounded-full gap-3 ${styles.field}`}>
              <div className={`flex items-center gap-2 text-sm ${styles.icon}`}>
                <i className="Icon IconDate"></i> Check out
              </div>
              <DatePicker
                selected={checkOutDate}
                onChange={handleCheckOutChange}
                dateFormat={DATE_FORMAT}
                minDate={checkInDate || new Date()}
                customInput={<ExampleCustomInput value={checkOutDate?.toLocaleDateString() || ""} onClick={() => { }} className={styles.input} />}
                className={`border-none outline-none bg-transparent cursor-pointer relative text-right ${styles.input}`}
              />
            </div>

            {/* Week Selector */}
            <div className={`flex items-center justify-between rounded-full ${styles.weekSelector}`}>
              <button
                className={`flex items-center justify-center rounded-full cursor-pointer transition duration-300 ease-in-out ${styles.minusbtn}`}
                onClick={() => setWeeks((prev) => (prev > 0 ? prev - 1 : 0))}
              >
                <i className="Icon IconMinus"></i>
              </button>
              <span className="fs-16">{weeks} week{weeks > 1 ? "s" : ""}</span>
              <button
                className={`flex items-center justify-center rounded-full cursor-pointer transition duration-300 ease-in-out ${styles.plusbtn}`}
                onClick={() => setWeeks((prev) => prev + 1)}
              >
                <i className="Icon IconPlus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SearchDate;