import { useState } from "react";
import { useDebounceCallback } from "usehooks-ts";

import Container from "@/components/shared/container";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs/tabs";
import BookingRequestListFilters from "@/features/demand/components/demand-list/components/booking-request-list-filters";
import BookingRequestSearchInput from "@/features/demand/components/demand-list/components/booking-request-search-input";
import { CorpRequestStatusEnum } from "@/services/eva-display/demand/booking-request-status/booking-request-status-services.types";

import BookingRequestListData from "./booking-request-list-data";

const BookingRequestList = () => {
  const [state, setState] = useState({
    query: "",
    listType: "incoming" as "incoming" | "outgoing",
    status: null as any,
    module: null as any,
  });

  const debouncedSearch = useDebounceCallback((value: string) => {
    setState((prev) => ({ ...prev, query: value }));
  }, 500);

  return (
    <div>
      <div className="bg-white">
        <Container>
          <div className="flex flex-col gap-6 pt-6">
            <h1 className="text-3xl font-bold">Taleplerim</h1>

            <div className="md:w-4/12">
              <BookingRequestSearchInput
                defaultValue={state.query}
                placeholder="Seyahat,otel veya misafir adı arayın"
                onChange={(value) => debouncedSearch(value)}
              />
            </div>
          </div>
        </Container>
      </div>
      <Tabs
        defaultValue={state.listType}
        className="w-full bg-white"
        onValueChange={(value) =>
          setState((prev) => ({ ...prev, listType: value as any }))
        }
      >
        <Container>
          <TabsList className="mt-6 w-full justify-start gap-4 pb-1.5 font-medium">
            <TabsTrigger value="incoming" className="px-7 py-3">
              Gelen Talepler
            </TabsTrigger>
            <TabsTrigger value="outgoing" className="px-7 py-3">
              Oluşturduklarım
            </TabsTrigger>
          </TabsList>
        </Container>
      </Tabs>

      <Container>
        <BookingRequestListFilters
          onStatusFilterChange={(value) => {
            const status: any = {
              Tümü: null,
              "Onay Bekleyen": CorpRequestStatusEnum.Waiting,
              Onaylanan: CorpRequestStatusEnum.Approved,
              Reddedilen: CorpRequestStatusEnum.Cancelled,
            };
            setState((prev) => ({ ...prev, status: status[value] }));
          }}
          onProductFilterChange={(value) => {
            const status: any = {
              Otel: "HotelModule",
              Uçak: "FlightModule",
              Transfer: "TransferModule",
              "Araç Kiralama": "CarRentalModule",
            };
            setState((prev) => ({ ...prev, module: status[value] }));
          }}
          onSortingChange={() => {}}
        />
        <div className="relative z-0 mt-6">
          <BookingRequestListData
            moduleName={state.module}
            status={state.status}
            query={state.query}
            isOnlyCurrentUser={state.listType === "outgoing"}
          />
        </div>
      </Container>
    </div>
  );
};

export default BookingRequestList;