From dae9e409b2eed2ee4299b623b0c9b506274e997f Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:48:00 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Work=20in=20progress:=20Implemen?=
 =?UTF-8?q?ting=20form=20components.=20=F0=9F=8E=A8=20Styling=20updates=20?=
 =?UTF-8?q?for=20search=20form.=20=F0=9F=93=85=20Added=20date=20picker=20f?=
 =?UTF-8?q?unctionality.=20=F0=9F=8F=A0=20Improved=20location=20input=20ha?=
 =?UTF-8?q?ndling.=20=F0=9F=91=A5=20Enhanced=20guest=20input=20handling.?=
 =?UTF-8?q?=20=F0=9F=90=9B=20Fixed=20minor=20bugs=20in=20the=20search=20fo?=
 =?UTF-8?q?rm.=20=F0=9F=9A=80=20Completed=20initial=20setup=20of=20StaySea?=
 =?UTF-8?q?rchForm=20component.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(stay-search-form)/StaySearchForm.tsx     | 145 ++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 src/app/(client-components)/(HeroSearchForm2Mobile)/(stay-search-form)/StaySearchForm.tsx

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/(stay-search-form)/StaySearchForm.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/(stay-search-form)/StaySearchForm.tsx
new file mode 100644
index 0000000..47ff686
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/(stay-search-form)/StaySearchForm.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import converSelectedDateToString from "@/utils/converSelectedDateToString";
+import React, { useState } from "react";
+import { GuestsObject } from "../../type";
+import GuestsInput from "../GuestsInput";
+import LocationInput from "../LocationInput";
+import DatesRangeInput from "../DatesRangeInput";
+
+const StaySearchForm = () => {
+  //
+  const [fieldNameShow, setFieldNameShow] = useState<
+    "location" | "dates" | "guests"
+  >("location");
+  //
+  const [locationInputTo, setLocationInputTo] = useState("");
+  const [guestInput, setGuestInput] = useState<GuestsObject>({
+    guestAdults: 0,
+    guestChildren: 0,
+    guestInfants: 0,
+  });
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2023/02/06")
+  );
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2023/02/23"));
+  //
+
+  const onChangeDate = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const renderInputLocation = () => {
+    const isActive = fieldNameShow === "location";
+    return (
+      <div
+        className={`w-full bg-white dark:bg-neutral-800 ${
+          isActive
+            ? "rounded-2xl shadow-lg"
+            : "rounded-xl shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]"
+        }`}
+      >
+        {!isActive ? (
+          <button
+            className={`w-full flex justify-between text-sm font-medium p-4`}
+            onClick={() => setFieldNameShow("location")}
+          >
+            <span className="text-neutral-400">Where</span>
+            <span>{locationInputTo || "Location"}</span>
+          </button>
+        ) : (
+          <LocationInput
+            defaultValue={locationInputTo}
+            onChange={(value) => {
+              setLocationInputTo(value);
+              setFieldNameShow("dates");
+            }}
+          />
+        )}
+      </div>
+    );
+  };
+
+  const renderInputDates = () => {
+    const isActive = fieldNameShow === "dates";
+
+    return (
+      <div
+        className={`w-full bg-white dark:bg-neutral-800 overflow-hidden ${
+          isActive
+            ? "rounded-2xl shadow-lg"
+            : "rounded-xl shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]"
+        }`}
+      >
+        {!isActive ? (
+          <button
+            className={`w-full flex justify-between text-sm font-medium p-4  `}
+            onClick={() => setFieldNameShow("dates")}
+          >
+            <span className="text-neutral-400">When</span>
+            <span>
+              {startDate
+                ? converSelectedDateToString([startDate, endDate])
+                : "Add date"}
+            </span>
+          </button>
+        ) : (
+          <DatesRangeInput />
+        )}
+      </div>
+    );
+  };
+
+  const renderInputGuests = () => {
+    const isActive = fieldNameShow === "guests";
+    let guestSelected = "";
+    if (guestInput.guestAdults || guestInput.guestChildren) {
+      const guest =
+        (guestInput.guestAdults || 0) + (guestInput.guestChildren || 0);
+      guestSelected += `${guest} guests`;
+    }
+
+    if (guestInput.guestInfants) {
+      guestSelected += `, ${guestInput.guestInfants} infants`;
+    }
+
+    return (
+      <div
+        className={`w-full bg-white dark:bg-neutral-800 overflow-hidden ${
+          isActive
+            ? "rounded-2xl shadow-lg"
+            : "rounded-xl shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]"
+        }`}
+      >
+        {!isActive ? (
+          <button
+            className={`w-full flex justify-between text-sm font-medium p-4`}
+            onClick={() => setFieldNameShow("guests")}
+          >
+            <span className="text-neutral-400">Who</span>
+            <span>{guestSelected || `Add guests`}</span>
+          </button>
+        ) : (
+          <GuestsInput defaultValue={guestInput} onChange={setGuestInput} />
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <div className="w-full space-y-5">
+        {/*  */}
+        {renderInputLocation()}
+        {/*  */}
+        {renderInputDates()}
+        {/*  */}
+        {renderInputGuests()}
+      </div>
+    </div>
+  );
+};
+
+export default StaySearchForm;