import FormDeparturePointsSelect from "@/components/form/components/related/form-departure-point-select";
import FormItem from "@/components/form/form-item";
import { Badge } from "@/components/ui/badge/badge";
import Card from "@/components/ui/card/card";
import type { LIconProps } from "@/components/ui/lucid-icon/lucid-icon";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import CoreSummaryCollapseInformationProps from "@/features/core/summary/components/core-summary-collapse-information";
import CustomerChildInfoFormItems from "@/features/customer/customer-info/child-customer-info-form/child-customer-info-form";
import CustomerInfoFormItems from "@/features/customer/customer-info/customer-info-form/customer-info-form";
import CustomerInfoSelectInput from "@/features/customer/customer-info-select/customer-info-select-input";
import { useApp } from "@/hooks/useApp";
import { useLocale } from "@/hooks/useLocale";
import { requiredRule } from "@/validations/form-rules/rules/required-rule";

import type { ICoreSummaryPassenger } from "../types/core-summary.types";

interface CoreSummaryPassengerGroupProps {
  groupTitle?: string;
  groupKey: string;
  groupProperties?: {
    iconName: LIconProps["name"];
    title: string;
  }[];
  passengers: ICoreSummaryPassenger[];
  hasMilesCode?: boolean;
  onMilesCodesChange?: (userId: string, milesCode: string) => void;
  hasPassportInfos?: boolean;
  hasDeparturePoint?: boolean;
  hasBadge?: boolean;
  hasReservationNote?: boolean;
  showIdentityWarning?: boolean;
  cancellationPolicy?: {
    key?: any;
    icon?: any;
    description: string;
    tooltip: string;
    refundable: boolean;
    cartDescription?: any;
  };
}

const CoreSummaryPassengerGroup = (props: CoreSummaryPassengerGroupProps) => {
  const { isReady, isB2C, isOtel } = useApp();
  const { t } = useLocale();
  if (!isReady) return null;
  return (
    <Card>
      <div>
        <h3 className="font-semibold">{props.groupTitle}</h3>
        {props.groupProperties && (
          <div className="flex gap-4">
            {props.groupProperties.map((groupProperty) => (
              <div
                className="flex items-center gap-1 text-sm text-gray-500"
                key={groupProperty.title}
              >
                <LIcon name={groupProperty.iconName} className="w-3" />
                <span>{groupProperty.title}</span>
              </div>
            ))}
          </div>
        )}
      </div>

      <hr className="my-4" />

      <div className="block sm:hidden">
        <p className="mb-[4px] text-xs font-semibold">
          {t("Guest Information")}
        </p>
        <p className="pb-4 text-xs text-gray-500">
          {t(
            "We will forward your reservation information via e-mail and free SMS.",
          )}
        </p>
      </div>

      <div className="flex flex-col gap-6">
        {props.passengers
          .filter((x) => x.type === "employee")
          .map((employee, employeeIndex) => (
            <FormItem
              name={`${props.groupKey}-${employee.key}-employee`}
              key={employee.key}
            >
              {({ field, setValue }) => (
                <CustomerInfoSelectInput
                  value={field.value ?? null}
                  onChange={(value) => setValue(value)}
                  label={t("{{count}}. adult", { count: employeeIndex + 1 })}
                  showMilesCodeInput={props.hasMilesCode}
                  onMilesChange={(milesCode) => {
                    props.onMilesCodesChange?.(field.value, milesCode);
                  }}
                />
              )}
            </FormItem>
          ))}

        {props.passengers
          .filter((x) => x.type === "guest")
          .map((guest, guestIndex) => (
            <div key={guest.key}>
              <div className="mb-2 flex items-center gap-3">
                <h3 className="text-xs font-semibold">
                  {t("{{count}}. adult information", { count: guestIndex + 1 })}
                </h3>
                {props.hasBadge && (
                  <Badge variant="primary">{guest.label}</Badge>
                )}
              </div>
              {props.hasReservationNote && guestIndex === 0 && (
                <p className="hidden pb-4 text-xs text-gray-500 sm:block">
                  {t(
                    "We will forward your reservation information via e-mail and free SMS.",
                  )}
                </p>
              )}
              <CustomerInfoFormItems
                showMilesCodeInput={props.hasMilesCode && guestIndex === 0}
                showIdentityWarning={props.showIdentityWarning}
                hasPassportInfos={props.hasPassportInfos}
                noContactInfo={
                  ((isB2C || isOtel) && guestIndex !== 0) ||
                  props.groupKey !== "group_key_0"
                }
                isBillingInfo={
                  (isB2C || isOtel) &&
                  guestIndex === 0 &&
                  props.groupKey === "group_key_0"
                }
                customerPrefix={`${props.groupKey}-${guest.key}-guest`}
              />

              {props.hasDeparturePoint && (
                <div className="mt-4 flex flex-col gap-4">
                  <div className="flex flex-col gap-1 text-gray-800 ">
                    <h3 className="font-semibold">Hareket Noktası seçimi</h3>
                    <p className="text-sm">
                      Tura katılacağınız şehir ve hareket noktası seçimini
                      yapın.
                    </p>
                  </div>
                  <FormDeparturePointsSelect
                    name={`${props.groupKey}-${guest.key}-guest-specialServiceRequests`}
                    rules={{
                      required: requiredRule,
                    }}
                  />
                </div>
              )}
            </div>
          ))}
        {props.passengers
          .filter((x) => x.type === "child")
          .map((child, childIndex) => (
            <div key={child.key}>
              <div className="mb-2 flex items-center gap-3">
                <h3 className="text-xs font-semibold">
                  {childIndex + 1}
                  {t(". Child")}
                </h3>
              </div>
              {isB2C || isOtel ? (
                <CustomerChildInfoFormItems
                  hasPassportInfos={props.hasPassportInfos}
                  customerPrefix={`${props.groupKey}-${child.key}-child`}
                />
              ) : (
                <CustomerInfoFormItems
                  customerPrefix={`${props.groupKey}-${child.key}-child`}
                  hasPassportInfos={props.hasPassportInfos}
                  showIdentityWarning={props.showIdentityWarning}
                />
              )}
            </div>
          ))}
      </div>
      {props.cancellationPolicy && (isB2C || isOtel) && (
        <div className="mt-4 flex flex-col gap-4">
          <h3 className="text-base font-semibold text-[#01133D]">
            {t("Cancellation Policy")}
          </h3>
          <CoreSummaryCollapseInformationProps
            title={props.cancellationPolicy.description}
            description={props.cancellationPolicy.tooltip}
          />
        </div>
      )}
    </Card>
  );
};

export default CoreSummaryPassengerGroup;