/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable no-nested-ternary */
/* eslint-disable react-hooks/exhaustive-deps */
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";

import Card from "@/components/ui/card/card";
import TransferListItem from "@/features/modules/transfer/list/components/transfer-list-item";
import type { TransferListHandles } from "@/features/modules/transfer/list/components/transfer-list-pure";
import TransferListPure from "@/features/modules/transfer/list/components/transfer-list-pure";
import { PriceManager } from "@/libs/price-manager/price-manager";
import { cn } from "@/libs/utils";

import { useBookingRequestTransferChangeContext } from "../context/booking-request-transfer-change-context";
import { BRTransferVariables } from "../libs/br-transfer-helper";
import BRListSortingDropdown from "./br-list-sorting-dropdown";

export type BRTransferListSelected = {
  selectedItems: any[];
  searchId: string;
  searchItemKey: string;
  info?: {
    images?: string[];
  };
};

interface BRTransferListProps {
  onItemSelect: (data: BRTransferListSelected) => void;
}

const BRTransferList = (props: BRTransferListProps) => {
  const { transferBookingRequest } = useBookingRequestTransferChangeContext();
  const transferVariable = new BRTransferVariables(transferBookingRequest);

  const transferListRef = useRef<TransferListHandles>(null);
  const [state, setState] = useState({
    selectedItems: [] as any[],
    searchId: "" as string,
    searchItemKey: "" as string,
    info: {
      images: [] as string[],
    },
  });

  useEffect(() => {
    if (
      transferVariable.isMultiple
        ? state.selectedItems.length === 2
        : state.selectedItems.length === 1
    ) {
      props.onItemSelect(state);
    }
  }, [state.selectedItems]);

  return (
    <div>
      {transferVariable.isMultiple && (
        <div className="flex w-auto cursor-pointer justify-start">
          {["Gidiş", "Dönüş"].map((item, index) => (
            <div
              key={item}
              onClick={() => {
                if (index === 0 && state.selectedItems.length === 1) {
                  setState(() => ({
                    selectedItems: [],
                    searchId: "",
                    searchItemKey: "",
                    info: {
                      images: [],
                    },
                  }));
                  transferListRef.current?.reset();
                }
              }}
              className={cn(
                "flex items-center justify-center bg-primary-50 border-primary-500 border before:bg-primary-50 min-w-[150px] text-primary-500 font-medium  text-sm rounded-primary",
                {
                  "":
                    (index === 0 && state.selectedItems.length === 0) ||
                    (index === 1 && state.selectedItems.length === 2),
                  "opacity-50 grayscale":
                    (index === 0 && state.selectedItems.length === 1) ||
                    (index === 1 && state.selectedItems.length === 0),
                  "arrow-div z-10 rounded-r-none": index === 0,
                  "border-l-0": index === 1,
                },
              )}
            >
              {item}
            </div>
          ))}
        </div>
      )}

      <Card className="mt-5 border border-primary-500 p-0">
        <div className="rounded-primary bg-primary-50 px-4 py-2 font-semibold">
          Seçili Transfer
        </div>
        <div>
          {transferVariable.transferSegmentGroups.map((x, i) => {
            const segmentItem = x.Items[0];
            if (segmentItem === undefined) return null;
            return (
              <div
                key={x.Key}
                className="space-y-1 rounded-primary border border-b-0 px-4 py-2"
              >
                {transferVariable.isMultiple && (
                  <div className="text-sm font-medium">
                    {i === 0 ? "Gidiş" : "Dönüş"}
                  </div>
                )}
                <TransferListItem
                  noWrappedCard
                  item={{
                    imageUrl: segmentItem.PictureUrl ?? "",
                    endTimeFormated:
                      dayjs(segmentItem.ArrivalTime).format("HH:mm") ?? "",
                    startTimeFormated:
                      dayjs(segmentItem.DepartureTime).format("HH:mm") ?? "",
                    maxPassengerCount: segmentItem.Quota,
                    title: segmentItem.Name,
                    hasBestPriceBadge: false,
                    isEconomic: false,
                    priceFormated: PriceManager({
                      currency: segmentItem.TotalPrice.slice(0, 3),
                      value: +segmentItem.TotalPrice.slice(3),
                    }),
                  }}
                />
              </div>
            );
          })}
        </div>
      </Card>
      <div>
        <TransferListPure
          ref={transferListRef}
          renderHeader={({ sortValue }) => (
            <div className="flex items-center justify-between">
              <div>
                <h5 className="text-xl font-semibold">
                  Alternatif Transferler
                </h5>
                <h6 className="text-base font-medium">
                  {`${transferVariable.directions.origin} - ${transferVariable.directions.destination}`}
                </h6>
              </div>
              <div className="min-w-[180px]">
                <BRListSortingDropdown
                  value={
                    sortValue === "PriceDescending"
                      ? 2
                      : sortValue === "PriceAscending"
                        ? 1
                        : 3
                  }
                  onChange={(value) => {
                    transferListRef.current?.sort(
                      value === 1
                        ? "ASC"
                        : value === 2
                          ? "DESC"
                          : "RECOMMENDED",
                    );
                  }}
                />
              </div>
            </div>
          )}
          passengerInformation={{
            adult: 1,
            child: 0,
          }}
          defaultRequestData={{
            SearchLegs:
              transferBookingRequest.displayInformations?.SearchRequest
                .SearchLegs,
          }}
          onItemSelect={(data) => {
            setState(() => ({
              selectedItems: data.items,
              searchId: data.searchId,
              searchItemKey: data.searchItemKey,
              info: {
                images: data.info?.images ?? [],
              },
            }));
          }}
          noFilter
        />
      </div>
    </div>
  );
};

export default BRTransferList;