import React, { Dispatch, SetStateAction } from "react";
import SearchBox from "../job-listing/SearchBox";
// import LocationBox from "../job-listing/LocationBoc";
import JobType from "./JobType";
import { usePathname } from "next/navigation";
import WorkMode from "./WorkMode";
import LocationBox from "../job-listing/LocationBox2";
// import LocationBox from "../job-listing/LocationBoc";
// import LocationBox from "../job-listing/LocationBox";

interface FilterSidebarProps {
  setSortAndFilterOptions: Dispatch<SetStateAction<SortAndFilterOptionsType>>;
  sortAndFilterOptions: SortAndFilterOptionsType;
  setClearAllStateDisabled: Dispatch<SetStateAction<boolean>>;
}

const FilterSidebar: React.FC<FilterSidebarProps> = ({
  setSortAndFilterOptions,
  sortAndFilterOptions,
  setClearAllStateDisabled,
}) => {
  const currentPath = usePathname();
  return (
    <div className="inner-column">
      <div className="filters-outer">
        <button
          type="button"
          className="btn-close text-reset close-filters show-1023"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
        ></button>
        {/* End .close filter */}

        <div className="filter-block">
          <h4 className="text-white">Search by Keywords</h4>
          <div className="form-group">
            <SearchBox
              setSortAndFilterOptions={setSortAndFilterOptions}
              sortAndFilterOptions={sortAndFilterOptions}
              setClearAllStateDisabled={setClearAllStateDisabled}
            />
          </div>
        </div>
        {/* <!-- Filter Block --> */}

        <div className="filter-block">
          <h4 className="text-white">Location</h4>
          <div className="form-group">
            <LocationBox
              setSortAndFilterOptions={setSortAndFilterOptions}
              sortAndFilterOptions={sortAndFilterOptions}
              setClearAllStateDisabled={setClearAllStateDisabled}
            />
          </div>
        </div>

        {/* <!-- Filter Block --> */}
        {currentPath === "/jobs" && (
          <div className="filter-block">
            <h4 className="text-white">Job type</h4>
            <div className="form-group">
              <JobType
                setSortAndFilterOptions={setSortAndFilterOptions}
                sortAndFilterOptions={sortAndFilterOptions}
                setClearAllStateDisabled={setClearAllStateDisabled}
              />
            </div>
          </div>
        )}

        {currentPath === "/jobs" && (
          <div className="filter-block">
            <h4 className="text-white">Work Mode</h4>
            <div className="form-group">
              <WorkMode
                setSortAndFilterOptions={setSortAndFilterOptions}
                sortAndFilterOptions={sortAndFilterOptions}
                setClearAllStateDisabled={setClearAllStateDisabled}
              />
            </div>
          </div>
        )}
        {currentPath === "/candidates-list" && (
          <>
            <div className="filter-block">
              <h4 className="text-white">Gender</h4>
              <div className="form-group">
                <select
                  className="form-select"
                  onChange={(e) => {
                    if (e.target.value !== "") setClearAllStateDisabled(false);
                    setSortAndFilterOptions((prev) => ({
                      ...prev,
                      gender: e.target.value,
                    }));
                  }}
                  value={sortAndFilterOptions.gender || ""}
                >
                  <option value="">All</option>
                  <option value="Male">Male</option>
                  <option value="Female">Female</option>
                  <option value="Others">Others</option>
                </select>
              </div>
            </div>

            <div className="filter-block">
              <h4 className="text-white">Verified Status</h4>
              <div className="form-group">
                <select
                  className="form-select"
                  onChange={(e) => {
                    setClearAllStateDisabled(false);
                    setSortAndFilterOptions((prev) => ({
                      ...prev,
                      isVerified: e.target.value,
                    }));
                  }}
                  value={sortAndFilterOptions.isVerified || ""}
                >
                  <option value="">All</option>
                  <option value="true">Verified</option>
                  <option value="false">Non verified</option>
                </select>
              </div>
            </div>



            <div className="filter-block">
              <h4 className="text-white">Psychometric Test</h4>
              <div className="form-group">
                <ul className="switchbox">
                  {[
                    "Openness to Experience",
                    "Emotional Stability",
                    "Conscientiousness",
                    "Agreeableness",
                    "Industriousness",
                    "Integrity",
                    "Resilience",
                    "Extraversion",
                    "Emotional Intelligence"
                  ].map(topic => (
                    <li key={topic} style={{ marginBottom: '10px' }}>
                      <label className="text-white" style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                        <input
                          type="checkbox"
                          checked={Array.isArray(sortAndFilterOptions.hasPsychometricResults) ? sortAndFilterOptions.hasPsychometricResults.includes(topic) : false}
                          onChange={(e) => {
                            setClearAllStateDisabled(false);
                            setSortAndFilterOptions((prev) => {
                              const prevArray = Array.isArray(prev.hasPsychometricResults) ? prev.hasPsychometricResults : [];
                              if (e.target.checked) {
                                return { ...prev, hasPsychometricResults: [...prevArray, topic] };
                              } else {
                                return { ...prev, hasPsychometricResults: prevArray.filter(t => t !== topic) };
                              }
                            });
                          }}
                          style={{ width: '20px', height: '20px' }}
                        />
                        {topic} more than 5
                      </label>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default FilterSidebar;