/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable unused-imports/no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */

"use client";

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

import Container from "@/components/shared/container";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs/tabs";
import BookingRequestList from "@/features/demand/components/demand-list/booking-request-list";
import BookingRequestListFilters, {
  productFilters,
  statusFilters,
} 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 { JsonParserHelper } from "@/libs/helpers/string-to-json-helper";
import { useBookingRequestsQuery } from "@/services/eva-display/booking-request/booking-request.service";
import { statusEnumTypes } from "@/services/eva-display/demand/demand-service.types";

const BookingRequestDataView = () => {
  const isDesktop = useMediaQuery("(min-width: 768px)");

  const demandListMutation = useBookingRequestsQuery({
    pagination: { pageNumber: 1, pageSize: 100 },
  });

  const [bookingRequestData, setBookingRequestData] = useState<any[]>([]);
  const [cloneBookingRequestData, setCloneBookingRequestData] = useState<any[]>(
    [],
  );

  // FilterField States
  const [searchInputVal, setSearchInputVal] = useState("");
  const [statusFilter, setStatusFilter] = useState("-1");
  const [_productFilter, setProductFilter] = useState("-1");

  // @ts-ignore
  const searchInputOnChange = (value: string) => {
    setSearchInputVal(value);
    let searchData;
    // eslint-disable-next-line prefer-const
    searchData = bookingRequestData;
    if (statusFilter !== "Tümü") {
      /* tumu degilse */
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      searchData = onStatusFilterChange(statusFilter, false);
    }

    // filtre yoksa
    if (!value) {
      if (statusFilter !== "Tümü") {
        setCloneBookingRequestData(searchData);
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        return onStatusFilterChange(statusFilter, false);
      }
      setCloneBookingRequestData(bookingRequestData);
      return bookingRequestData;
    }

    const filteredData: any =
      searchData &&
      searchData.filter((item: any) => {
        const { displayInformations, passengerInformations } = item;
        // convert string value to json format
        const DInformation =
          JsonParserHelper.jsonParseOrUndefined(displayInformations);
        const PInformation = JsonParserHelper.jsonParseOrUndefined(
          passengerInformations,
        );

        // start logic
        const TotalPrice = `${item.totalPrice}`;
        const TraveReason = `${item?.travelReasonName}`.toLowerCase();
        const HotelName =
          DInformation?.HotelName && DInformation.HotelName.toLowerCase();
        const PNames =
          PInformation &&
          Object.values(PInformation)
            .map((passanger: any) => {
              return passanger?.Name;
            })
            .join(", ")
            .toLowerCase();
        // end logic

        const searchTerm = value.toLowerCase();

        return (
          (TraveReason && TraveReason.includes(searchTerm)) ||
          (TotalPrice && TotalPrice.includes(searchTerm)) ||
          (PNames && PNames.includes(searchTerm)) ||
          (HotelName && HotelName.includes(searchTerm))
        );
      });

    setCloneBookingRequestData(filteredData);
    return filteredData;
  };

  // @ts-ignore
  const onStatusFilterChange = (e: string, isEmpty: boolean) => {
    if (!isEmpty) {
      return cloneBookingRequestData;
    }
    const keyByValue = statusFilters.find((item) => item.label === e);
    setStatusFilter(e);

    let filteredData = bookingRequestData;
    if (searchInputVal) {
      filteredData = searchInputOnChange(searchInputVal);
    }

    // filtre yoksa
    if (keyByValue?.val === "-1") {
      if (searchInputVal) {
        setCloneBookingRequestData(filteredData);
        return searchInputOnChange(searchInputVal);
      }
      setCloneBookingRequestData(bookingRequestData);
      return bookingRequestData;
    }

    // filtre varsa
    const result = filteredData.filter(
      (item: any) => statusEnumTypes[item.requestStatus] === keyByValue?.val,
    );

    setCloneBookingRequestData(result);
    return result;
  };
  const onProductFilterChange = (e: string) => {
    const keyByValue = productFilters.find((item) => item.label === e);

    setProductFilter(keyByValue?.val || "-1");
    if (keyByValue?.val === "-1" /* Tümü */) {
      setCloneBookingRequestData(bookingRequestData);
      return false;
    }

    const filteredData =
      bookingRequestData &&
      bookingRequestData.filter(
        (item: any) => item?.moduleName === keyByValue?.val,
      );

    setCloneBookingRequestData(filteredData);

    return filteredData;
  };
  const onSortingChange = (_e: string) => {};

  useEffect(() => {
    if (demandListMutation.data) {
      const { data } = demandListMutation;
      setBookingRequestData(data);
      setCloneBookingRequestData(data);
    }
  }, [demandListMutation.data]);

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

            {isDesktop && (
              <div className="w-4/12">
                <BookingRequestSearchInput
                  defaultValue={searchInputVal}
                  placeholder="Seyahat,otel veya misafir adı arayın"
                  onChange={searchInputOnChange}
                />
              </div>
            )}
          </div>
        </Container>
      </div>
      <Tabs defaultValue="1" className="w-full bg-white">
        <Container>
          <TabsList className="mt-6 w-full justify-start gap-4 pb-1.5 font-medium">
            <TabsTrigger value="1" className="px-7 py-3">
              Gelen Talepler
            </TabsTrigger>
            <TabsTrigger disabled value="2" className="px-7 py-3">
              Oluşturduklarım
            </TabsTrigger>
          </TabsList>
        </Container>
        <div className="relative border-t border-gray-200 bg-gray-50 pb-20">
          <Container>
            <TabsContent value="1" className=" mt-0">
              {!isDesktop && (
                <div className="pt-6">
                  <BookingRequestSearchInput
                    defaultValue={searchInputVal}
                    placeholder="Seyahat,otel veya misafir adı arayın"
                    onChange={searchInputOnChange}
                  />
                </div>
              )}

              <BookingRequestListFilters
                onStatusFilterChange={onStatusFilterChange}
                onProductFilterChange={onProductFilterChange}
                onSortingChange={onSortingChange}
              />

              <div className="relative z-0 mt-6">
                <BookingRequestList items={cloneBookingRequestData} />
              </div>
            </TabsContent>
            <TabsContent value="2" className="mt-0" />
          </Container>
        </div>
      </Tabs>
    </>
  );
};

export default BookingRequestDataView;