/* eslint-disable no-constant-condition */
/* eslint-disable no-self-compare */
/* eslint-disable no-self-compare */
/* eslint-disable @next/next/no-img-element */
import dayjs from "dayjs";
import React from "react";

import type { ITransferReservationData } from "@/services/eva-display/demand/transfer-reservation-data/transfer-reservation-data";

import { ReservationSummaryRoutes } from "../../reservation-summary/reservation-summary";
import TransferRequestDetailAdressCard from "./transfer-request-detail-adress-card";

export interface TransferRequestDetailCardProps {
  reservationData: ITransferReservationData;
}

const TransferRequestDetailCard = ({
  reservationData,
}: TransferRequestDetailCardProps) => {
  const TransferSegmentGroupItem =
    reservationData.DetailResponse.TransferSegmentGroupItem &&
    reservationData.DetailResponse.TransferSegmentGroupItem[0];

  const Items = TransferSegmentGroupItem?.Items?.sort(
    (a, b) => a.GroupId - b.GroupId,
  );

  // const tripLength = Items && Items.length;

  const DepartureTime = Items && Items[0]?.DepartureTime;
  const transferImage =
    Items && Items.length > 0 ? Items[0]?.PictureUrl : undefined;

  return (
    <div className="flex w-full gap-4 p-4">
      <div className="flex w-full items-center justify-between gap-2">
        <div className="flex flex-col">
          <div className="flex items-center gap-6 whitespace-nowrap">
            <img
              className="h-[81px] w-[141px] object-cover"
              src={transferImage as string}
              alt=""
            />
            <div className="flex flex-col gap-2">
              <p className="line-clamp-2 w-48 whitespace-normal text-lg font-semibold text-gray-800">
                {Items && Items[0]?.Name}
              </p>
              <p className="text-lg text-gray-800">
                {dayjs(DepartureTime?.toString()).format("DD MMMM YYYY")}
              </p>
              <ReservationSummaryRoutes
                origin="+Taksim Meydan"
                destination="+Bostancı Sahil"
              />
            </div>
          </div>
        </div>

        <div className="w-6/12">
          <TransferRequestDetailAdressCard
            reservationData={reservationData as ITransferReservationData}
          />
        </div>
      </div>
    </div>
  );
};

export default TransferRequestDetailCard;