/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
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 FlightMultipleWayCard from "@/components/widget/request-card/flight-request-card/flight-multiple-way-card";
import styles from "@/components/widget/request-card/flight-request-card/flight-request-card.module.css";
import { useBreakpoints } from "@/hooks/useBreakpoints";
import { DateHelper } from "@/libs/helpers/date-time-helper";
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 { IFlightBookedProduct } from "@/services/eva-display/demand/flight-booked-product/flight-booked-product";
import type { IPlaneReservationData } from "@/services/eva-display/demand/flight-reservation-data/flight-reservation-data";
import type { IPassengerInformation } from "@/services/eva-display/demand/passenger-information/passenger-information";

export interface IFlightRequestCardProps {
  bookedProduct: IFlightBookedProduct;
  reservationData: IPlaneReservationData;
  passengerInformations: IPassengerInformation;
  item: IBookingRequestItem;
  className?: string;
}

function Undefined() {
  return <small className="text-error-400">bulunamadı</small>;
}

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

  const pricingCombinations =
    reservationData?.DetailResponse?.PricingCombinations;

  const combinationGroups =
    pricingCombinations[0] && pricingCombinations[0].CombinationGroups;

  const segments =
    combinationGroups &&
    combinationGroups[0] &&
    combinationGroups[0].FlightSegments;

  const originSegment = segments && segments[0];
  const arrivalSegment = segments && segments[segments.length - 1];

  if (!originSegment || !arrivalSegment) {
    return null;
  }

  const destination = arrivalSegment.Destination.split(" ")[0]!.replace(
    ",",
    "",
  );

  const mainCurrency =
    reservationData!.DetailResponse!.PricingCombinations[0]!.TotalPrice.slice(
      0,
      3,
    );
  const totalledPrice =
    reservationData.DetailResponse.PricingCombinations.length > 1
      ? reservationData.DetailResponse.PricingCombinations.reduce(
          (acc, curr) => acc + +curr.TotalPrice.slice(3),
          0,
        )
      : +reservationData.DetailResponse.PricingCombinations[0]!.TotalPrice.slice(
          3,
        );

  const totalPrice = PriceManager({
    currency: mainCurrency,
    value: totalledPrice,
  });

  const tripLength = combinationGroups && combinationGroups.length;
  const requestDetailPath = `/flight-request-detail?id=${item?.id}`;
  const handleClickCard = () => {
    if (!isDesktop) {
      window.scrollTo(0, 0);
      router.push(requestDetailPath);
    }
  };
  return (
    <div className={cn(styles.container, className, "group")}>
      <div className={styles.more}>
        <DropdownMenu>
          <DropdownMenuTrigger>
            <LIcon name="MoreVertical" size={20} />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            {/* todo : islevsiz oldugu icin simdilik gizlendi
            {statusEnumTypes[status] === "warning" && (
              <>
                <DropdownMenuItem className="cursor-pointer px-4 py-2.5">
                  <LIcon name="CheckSquare" className="mr-2 h-4 w-4" />
                  <span>Onayla</span>
                </DropdownMenuItem>
                <DropdownMenuItem className="cursor-pointer px-4 py-2.5">
                  <LIcon name="Ban" className="mr-2 h-4 w-4" />
                  <span>Reddet</span>
                </DropdownMenuItem>
                <Link href={`booking-request-flight-change?id=${item?.id}`}>
                  <DropdownMenuItem className="cursor-pointer px-4 py-2.5">
                    <LIcon name="FileEdit" className="mr-2 h-4 w-4" />
                    <span>Değiştir</span>
                  </DropdownMenuItem>
                </Link>
              </>
            )} */}
            {/* {statusEnumTypes[status] === "warning" && (
              <Link href={`booking-request-flight-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 lg:flex-row"
        onClick={handleClickCard}
      >
        <div className={styles.contentWrapper}>
          <h2 className={styles.title}>
            {`${destination}${
              item?.travelReasonName ? ` ${item?.travelReasonName}` : ""
            } Seyahati`}
          </h2>

          <div className="mt-3 flex w-full flex-col gap-5 md:flex-row">
            <div className="md:w-6/12">
              <div className="grid grid-cols-3 space-x-2 md:space-x-0">
                <div className="status-area col-span-1">
                  <p className={styles.heading}>Onay Durumu</p>
                  <StatusText
                    className={cn(
                      styles.detail,
                      "mt-1 text-xs md:text-sm whitespace-nowrap",
                    )}
                    status={statusEnumTypes[status] || "warning"}
                  />
                </div>
                {statusEnumTypes[status] === "denied" ||
                  (statusEnumTypes[status] !== "error" &&
                    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}>Opsiyon Süresi</p>
                        <div className="mt-2 text-xs font-medium text-warning-500 md:mt-1.5 md:text-sm">
                          {`${DateHelper.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 text-xs md:text-base">
                <div>
                  <p className={styles.heading}>
                    {bookedProduct.BookingInformation.RoundString}
                  </p>
                  <p className={cn(styles.detail, "mt-1")}>
                    {bookedProduct.BookingInformation.RoundDepartureTime}
                  </p>
                </div>
                {tripLength === 2 && (
                  <div>
                    <p className={styles.heading}>
                      {bookedProduct.BookingInformation.TripString}
                    </p>
                    <p className={cn(styles.detail, "mt-1")}>
                      {DateHelper.dayjs(
                        combinationGroups.find((x) => x.GroupId === 1)
                          ?.FlightSegments[0]?.DepartureTime as unknown as Date,
                      ).format("DD MMM YYYY dddd")}
                    </p>
                  </div>
                )}
                <div>
                  <p className={styles.heading}>Toplam Tutar</p>
                  <p className={cn(styles.detail, "mt-1")}>{totalPrice}</p>
                </div>

                <div
                  className={
                    tripLength === 2 ? "col-span-3" : "col-span-3 md:col-span-1"
                  }
                >
                  {/* className="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="md:w-6/12">
              <FlightMultipleWayCard
                reservationData={reservationData as IPlaneReservationData}
              />
              {/* <FlightTwoWayCard /> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FlightRequestCard;