From 072fbe77421b70fb615a974c241a9a607271c883 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 19:33:14 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20client=20usage.=20?=
 =?UTF-8?q?=F0=9F=8C=9F=20Added=20date=20conversion=20utility.=20?=
 =?UTF-8?q?=F0=9F=93=8A=20Integrated=20Redux=20for=20state=20management.?=
 =?UTF-8?q?=20=F0=9F=92=A1=20Improved=20component=20structure.=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20Enhanced=20UI=20design=20for=20better=20user=20e?=
 =?UTF-8?q?xperience.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(car-search-form)/CarsSearchForm.tsx      | 166 ++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 src/app/(client-components)/(HeroSearchForm2Mobile)/(car-search-form)/CarsSearchForm.tsx

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/(car-search-form)/CarsSearchForm.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/(car-search-form)/CarsSearchForm.tsx
new file mode 100644
index 0000000..967b368
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/(car-search-form)/CarsSearchForm.tsx
@@ -0,0 +1,166 @@
+"use client";
+import converSelectedDateToString from "@/utils/converSelectedDateToString";
+import React, { useState } from "react";
+import DatesRangeInput from "../DatesRangeInput";
+import LocationInput from "../LocationInput";
+
+const CarsSearchForm = () => {
+  //
+  const [fieldNameShow, setFieldNameShow] = useState<
+    "locationPickup" | "locationDropoff" | "dates"
+  >("locationPickup");
+  //
+  const [locationInputPickUp, setLocationInputPickUp] = useState("");
+  const [locationInputDropOff, setLocationInputDropOff] = useState("");
+
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2023/02/06")
+  );
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2023/02/23"));
+
+  const [dropOffLocationType, setDropOffLocationType] = useState<
+    "same" | "different"
+  >("same");
+
+  const renderInputLocationPickup = () => {
+    const isActive = fieldNameShow === "locationPickup";
+    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("locationPickup")}
+          >
+            <span className="text-neutral-400">Pick up</span>
+            <span>{locationInputPickUp || "Location"}</span>
+          </button>
+        ) : (
+          <LocationInput
+            headingText="Pick up?"
+            defaultValue={locationInputPickUp}
+            onChange={(value) => {
+              setLocationInputPickUp(value);
+              if (dropOffLocationType === "different") {
+                setFieldNameShow("locationDropoff");
+              } else {
+                setFieldNameShow("dates");
+              }
+            }}
+          />
+        )}
+      </div>
+    );
+  };
+
+  const renderInputLocationDropoff = () => {
+    const isActive = fieldNameShow === "locationDropoff";
+    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("locationDropoff")}
+          >
+            <span className="text-neutral-400">Drop off</span>
+            <span>{locationInputDropOff || "Location"}</span>
+          </button>
+        ) : (
+          <LocationInput
+            headingText="Drop off?"
+            defaultValue={locationInputDropOff}
+            onChange={(value) => {
+              setLocationInputDropOff(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 renderRadioBtn = () => {
+    return (
+      <div className="flex justify-center items-center space-x-3">
+        <div
+          className={`py-1.5 px-4 flex items-center rounded-full font-medium text-xs cursor-pointer ${
+            dropOffLocationType === "same"
+              ? "bg-black text-white shadow-black/10 shadow-lg"
+              : "border border-neutral-300 dark:border-neutral-700"
+          }`}
+          onClick={(e) => setDropOffLocationType("same")}
+        >
+          Same drop off
+        </div>
+        <div
+          className={`py-1.5 px-4 flex items-center rounded-full font-medium text-xs cursor-pointer ${
+            dropOffLocationType === "different"
+              ? "bg-black text-white shadow-black/10 shadow-lg"
+              : "border border-neutral-300 dark:border-neutral-700"
+          }`}
+          onClick={(e) => setDropOffLocationType("different")}
+        >
+          Different drop off
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <div className="w-full space-y-5">
+        {renderRadioBtn()}
+
+        {renderInputLocationPickup()}
+        {/*  */}
+        {dropOffLocationType === "different" && renderInputLocationDropoff()}
+        {/*  */}
+        {renderInputDates()}
+        {/*  */}
+      </div>
+    </div>
+  );
+};
+
+export default CarsSearchForm;