import { AnimatePresence, motion } from "motion/react";
import {
  surroundingPoints,
  type ISurroundingPoint,
} from "../consts/surroundingPoints";
import CategoriesFilter from "./CategoriesFilter";
import CarIcon from "./icons/CarIcon";
import SurroundingsIcon from "./icons/SurroundingsIcon";
import Select from "./ui/Select";

interface SurroundingsFilterProps {
  selectedLocation?: string;
  onSelectLocation: (location: string | undefined) => void;
  selectedCategories: Set<string>;
  onToggleCategory: (category: string) => void;
  filteredPoints: ISurroundingPoint[];
}

function SurroundingsFilter({
  selectedLocation,
  onSelectLocation,
  selectedCategories,
  onToggleCategory,
  filteredPoints,
}: SurroundingsFilterProps) {
  return (
    <div className="max-md:space-y-1 absolute top-4 left-4 z-10">
      <div className="2xl:space-y-[1.111vw] space-y-4 bg-[#F7F6F3] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] md:p-4 p-1 max-md:pr-2 2xl:shadow-[0_0.278vw_2.778vw_0_rgba(15,16,17,0.1),0_0.139vw_0.139vw_0_rgba(0,0,0,0.06)] shadow-[0px_4px_40px_0px_rgba(15,16,17,0.1),0px_2px_2px_0px_rgba(0,0,0,0.06)] 2xl:w-[20.556vw] md:w-[296px] w-[93.333vw]">
        <div className="flex flex-col 2xl:gap-[0.556vw]">
          <div className="flex 2xl:gap-[0.556vw] gap-2 items-center">
            <div className="2xl:space-y-[0.139vw] space-y-0.5 flex-1 self-stretch 2xl:max-w-[16.667vw] md:max-w-[240px] max-w-[84.444vw]">
              <p className="bg-[#F0EDE6] 2xl:px-[0.833vw] px-3 2xl:py-[0.764vw] py-[11px] 2xl:rounded-t-[0.833vw] 2xl:rounded-b-[0.139vw] rounded-b-[2px] rounded-t-xl text-s">
                Baraha Town
              </p>
              <Select
                className="2xl:!rounded-t-[0.139vw] !rounded-t-[2px]"
                options={filteredPoints.map((point) => point.title)}
                onChange={onSelectLocation}
                placeholder="Select location on the map"
                value={selectedLocation}
              />
            </div>
            <div className="flex flex-col 2xl:gap-[0.278vw] gap-1 items-center">
              <div className="2xl:size-[0.833vw] size-3 rounded-full 2xl:ring-[0.069vw] ring-1 ring-[#A7A08E] aspect-square 2xl:m-[0.139vw] m-0.5" />
              <div className="2xl:size-[0.139vw] size-0.5 bg-[#A7A08E] rounded-full aspect-square" />
              <div className="2xl:size-[0.139vw] size-0.5 bg-[#A7A08E] rounded-full aspect-square" />
              <div className="2xl:size-[0.139vw] size-0.5 bg-[#A7A08E] rounded-full aspect-square" />
              <div className="2xl:size-[1.111vw] size-4 text-[#F47F52]">
                <SurroundingsIcon />
              </div>
            </div>
          </div>
          {selectedLocation && (
            <div className="2xl:py-[0.278] py-1 flex items-center 2xl:gap-[0.278vw] text-[#A7A08E] max-md:hidden">
              <div className="2xl:size-[1.111vw] size-4">
                <CarIcon />
              </div>
              <p className="caption font-medium">
                {
                  filteredPoints.find(
                    (point) => point.title === selectedLocation
                  )?.travelTime
                }{" "}
                min
              </p>
            </div>
          )}
        </div>
        <hr className="border-[#E2DCCF] 2xl:border-[0.069vw] border max-md:hidden" />
        <CategoriesFilter
          onToggleCategory={onToggleCategory}
          selectedCategories={selectedCategories}
        />
      </div>
      <AnimatePresence>
        {selectedLocation && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="md:hidden px-2 py-1.5 rounded-2xl flex items-center gap-1 shadow-[0_4px_40px_0_#0F10111A] text-[#A7A08E] bg-white w-fit"
          >
            <div className="size-4">
              <CarIcon />
            </div>
            <p className="caption font-medium">
              {
                surroundingPoints.find(
                  (point) => point.title === selectedLocation
                )?.travelTime
              }{" "}
              min
            </p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default SurroundingsFilter;
