"use client";

import { useEffect } from "react";
import { useMediaQuery } from "usehooks-ts";

import { useFlightSearch } from "../../hooks/use-flight-search";
import FlightFilterSort from "../flight-filter-sort/flight-filter-sort";
import FlightListFilter from "./components/flight-list-filter";
import FlightListResult from "./components/flight-list-result";
import {
  FlightListContextProvider,
  useFlightListContext,
} from "./context/flight-list-context";

const FlightListContent = () => {
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const { departureSegmentKey } = useFlightListContext();
  return (
    <div className="flex flex-col justify-start gap-4 md:flex-row">
      {!departureSegmentKey && (
        <div className="flex min-w-[248px] flex-col">
          {isDesktop ? <FlightListFilter /> : <FlightFilterSort />}
        </div>
      )}
      <div className="flex grow flex-col gap-2">
        <FlightListResult />
      </div>
    </div>
  );
};

const FlightList = () => {
  const { getFlightSeacrhParameters, isReady } = useFlightSearch();

  useEffect(() => {
    localStorage.removeItem("flight-cart");
  }, []);

  if (!isReady) return null;

  const searchParameters = getFlightSeacrhParameters();

  return (
    isReady && (
      <FlightListContextProvider urlVariables={searchParameters}>
        <FlightListContent />
      </FlightListContextProvider>
    )
  );
};

export { FlightList };