/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable unused-imports/no-unused-vars */
/* eslint-disable no-constant-condition */
/* eslint-disable no-self-compare */

import dayjs from "dayjs";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React from "react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu/dropdown-menu";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { StatusText } from "@/components/ui/status-text/status-text";
import styles from "@/components/widget/request-card/flight-request-card/flight-request-card.module.css";
import { useBreakpoints } from "@/hooks/useBreakpoints";
import { PriceManager } from "@/libs/price-manager/price-manager";
import { cn } from "@/libs/utils";
import type { IBookingRequestItem } from "@/services/eva-display/demand/demand-service.types";
import { statusEnumTypes } from "@/services/eva-display/demand/demand-service.types";
import type { IPassengerInformation } from "@/services/eva-display/demand/passenger-information/passenger-information";
import type { ITransferBookedProduct } from "@/services/eva-display/demand/transfer-booked-product/transfer-booked-product";
import type { ITransferReservationData } from "@/services/eva-display/demand/transfer-reservation-data/transfer-reservation-data";

import TransferMultipleWayCard from "./transfer-multiple-way-card";

export interface ITransferRequestCardProps {
  bookedProduct: ITransferBookedProduct;
  reservationData: ITransferReservationData;
  passengerInformations: IPassengerInformation;
  item: IBookingRequestItem;
  className?: string;
}
function Undefined() {
  return <small className="text-error-400">bulunamadı</small>;
}

const TransferRequestCard = ({
  item,
  passengerInformations,
  reservationData,
  bookedProduct: _bookedProduct,
  className,
}: ITransferRequestCardProps) => {
  const status = item?.requestStatus as number;
  const { isDesktop } = useBreakpoints();
  const router = useRouter();

  if (
    !reservationData ||
    !reservationData?.DetailResponse?.TransferSegmentGroupItem
  ) {
    return null;
  }

  let transferSegmentGroupItems =
    reservationData.DetailResponse.TransferSegmentGroupItem?.filter((x) =>
      reservationData.ProductKeys.includes(x.Key),
    );

  transferSegmentGroupItems = transferSegmentGroupItems.sort(
    (a, b) =>
      dayjs(a.Items[0]?.DepartureTime).valueOf() -
      dayjs(b.Items[0]?.DepartureTime).valueOf(),
  );

  const requestDetailPath = `/transfer-request-detail?id=${item?.id}`;
  const handleClickCard = () => {
    if (!isDesktop) {
      window.scrollTo(0, 0);
      router.push(requestDetailPath);
    }
  };

  const originSegmentGroup = transferSegmentGroupItems[0]?.Items[0];
  const destinationSegmentGroup =
    transferSegmentGroupItems.length === 1
      ? null
      : transferSegmentGroupItems[1]?.Items[0];

  return (
    <div className={cn(styles.container, className, "group")}>
      <div className={styles.more}>
        <DropdownMenu>
          <DropdownMenuTrigger>
            <LIcon name="MoreVertical" size={20} />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            {/* <Link href={`booking-request-transfer-change?id=${item?.id}`}>
              <DropdownMenuItem className="cursor-pointer px-4 py-2.5">
                <LIcon name="FileEdit" className="mr-2 size-4" />
                <span>Değiştir</span>
              </DropdownMenuItem>
            </Link> */}
            <Link href={requestDetailPath}>
              <DropdownMenuItem className="cursor-pointer px-4 py-2.5">
                <LIcon name="Eye" className="mr-2 size-4" />
                <span>İncele</span>
              </DropdownMenuItem>
            </Link>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <div
        className="flex flex-col gap-6 md:flex-row"
        onClick={handleClickCard}
      >
        <div className={styles.contentWrapper}>
          <h2 className={cn(styles.title)}>
            {originSegmentGroup?.Name}
            {/* {`${destination}${
              item?.travelReasonName ? ` ${item?.travelReasonName}` : ""
            } Seyahati`} */}
          </h2>

          <div className="mt-3 flex w-full flex-col gap-5 lg:flex-row">
            <div className="w-full md:w-6/12">
              <div className="grid grid-cols-3">
                <div className="status-area col-span-2">
                  <p className={styles.heading}>Onay Durumu</p>
                  <StatusText
                    className={cn(styles.detail, "mt-1")}
                    status={statusEnumTypes[status] || "warning"}
                  />
                </div>
                {item.bookedProduct &&
                  (item.bookedProduct as any).OptionDate &&
                  dayjs((item.bookedProduct as any)?.OptionDate).isValid() && (
                    <div className="status-area col-span-2">
                      <p className={styles.heading}>Option Süresi</p>
                      <div className="mt-1.5 text-sm font-medium text-warning-500">
                        {`${dayjs(
                          (item.bookedProduct as any)?.OptionDate,
                        ).format("DD.MM.YYYY HH:mm")}'e kadar`}
                      </div>
                    </div>
                  )}
              </div>

              <div className="mt-4 grid grid-cols-3 gap-x-2.5 gap-y-4">
                <div>
                  <p className={styles.heading}>Gidiş Tarihi</p>
                  <p className={cn(styles.detail, "mt-1")}>
                    {dayjs(originSegmentGroup?.DepartureTime).format(
                      "DD MMMM YYYY",
                    )}
                  </p>
                </div>
                {!!destinationSegmentGroup && (
                  <div>
                    <p className={styles.heading}>Dönüş Tarihi</p>
                    <p className={cn(styles.detail, "mt-1")}>
                      {dayjs(destinationSegmentGroup.DepartureTime).format(
                        "DD MMMM YYYY",
                      )}
                    </p>
                  </div>
                )}
                <div>
                  <p className={styles.heading}>Toplam Tutar</p>
                  <p className={cn(styles.detail, "mt-1")}>
                    {PriceManager({
                      currency: "TRY",
                      value: (`${item?.totalPrice}` as unknown as number) || 0,
                    })}
                  </p>
                </div>

                <div className={destinationSegmentGroup ? "col-span-3" : ""}>
                  <p className={styles.heading}>Kişiler</p>
                  {passengerInformations
                    ? Object.values(passengerInformations)
                        .map((passanger) => {
                          return `${passanger?.Name} ${passanger?.Surname}`;
                        })
                        .join(", ")
                    : Undefined()}
                </div>
              </div>
            </div>

            <div className="w-full shrink-0 lg:w-6/12 lg:min-w-[500px]">
              <TransferMultipleWayCard
                reservationData={reservationData as ITransferReservationData}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TransferRequestCard;