/* eslint-disable react/jsx-key */
/* eslint-disable no-console */
import dayjs from "dayjs";
import React from "react";

import TourCard from "@/components/widget/tour-card/tour-card";

import { removeDuplicateCampaigns } from "../../detail/components/tour-detail";
import type { ITourListItem } from "../types/tour-list.types";

interface TourListItemProps {
  onClick: VoidFunction;
  item: ITourListItem;
}

export default function TourListItem({ item, ...props }: TourListItemProps) {
  const uniqueSet = new Set<string>();

  const extendIncludedDepaturePoints = (item.depaturePoints || [])
    .slice(1)
    .map(({ city }, key) => {
      if (city !== item?.depaturePoints?.[0]?.city && !uniqueSet.has(city)) {
        uniqueSet.add(city);
        return <li key={+key}>{city}</li>;
      }
      return null;
    })
    .filter(Boolean);

  const extendIncludedAllOptionList = (item.allOptionList || [])
    .sort((a, b) => dayjs(a.startDate).diff(dayjs(b.startDate)))
    .slice(1)
    .map(({ startDate }, key) => {
      const formattedDate = dayjs(startDate).format("DD MMM YYYY");
      if (
        formattedDate !==
          dayjs(item?.allOptionList?.[0]?.startDate).format("DD MMM YYYY") &&
        !uniqueSet.has(formattedDate)
      ) {
        uniqueSet.add(formattedDate);
        return <li key={+key}>{formattedDate}</li>;
      }
      return null;
    })
    .filter(Boolean);

  const isAvailable =
    !item.option.hasQuota || item.option.onRequest || item.option.closedGroup;

  const transportTypes = [];

  if (item?.option?.transportType === item?.option?.transportReturnType) {
    transportTypes.push({
      label: "Gidiş-Dönüş",
      value: item?.option?.transportType,
    });
  } else {
    transportTypes.push(
      {
        label: "Gidiş",
        value: item?.option?.transportType,
      },
      {
        label: "Dönüş",
        value: item?.option?.transportReturnType,
      },
    );
  }

  return (
    <TourCard
      availableDateButton={isAvailable}
      id={item?.packageId?.toString() || ""}
      detailItems={[
        {
          label: "Hareket Tarihleri",
          value: dayjs(item?.allOptionList?.[0]?.startDate).format(
            "DD MMM YYYY",
          ),
          tooltip:
            extendIncludedAllOptionList.length > 0
              ? {
                  children: `+${extendIncludedAllOptionList.length}`,
                  label: (
                    <div className="text-xs">
                      <div className="font-medium">Diğer hareket tarihleri</div>
                      <div className="p-2">{extendIncludedAllOptionList}</div>
                    </div>
                  ),
                }
              : undefined,
        },
        {
          label: "Hareket Noktaları",
          value: item?.depaturePoints?.[0]?.city || "",
          tooltip:
            extendIncludedDepaturePoints.length > 0
              ? {
                  children: `+${extendIncludedDepaturePoints.length}`,
                  label: (
                    <div className="text-xs">
                      <div className="font-medium">Diğer hareket noktaları</div>
                      <div className="p-2">{extendIncludedDepaturePoints}</div>
                    </div>
                  ),
                }
              : undefined,
        },
        ...transportTypes,
      ]}
      SpecificationError={
        isAvailable ? "Seçtiğiniz Tarihlerde Boş Oda Kalmadı" : undefined
      }
      includedSpecifications={
        item?.campaignInformations
          ? removeDuplicateCampaigns(item.campaignInformations)?.map(
              ({ name }) => ({
                icon: "Activity",
                text: name,
              }),
            )
          : []
      }
      images={
        item?.defaultThumbnailImageUrl
          ? [item.defaultThumbnailImageUrl]
          : undefined
      }
      tourName={item.title}
      price={item.priceFormated}
      priceInformation="`den başlayan"
      onClickPrimaryButton={() => {
        props.onClick();
      }}
    />
  );
}