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 type { ICoreSummaryPassenger } from "@/features/core/summary/types/core-summary.types";
import CustomerInfoSelectInput from "@/features/customer/customer-info-select/customer-info-select-input";

import TransferSummaryInfoForm from "./transfer-summary-info-form";

interface TransferSummaryPassengerGroupProps {
  groupTitle: string;
  groupKey: string;
  groupProperties?: {
    iconName: LIconProps["name"];
    title: string;
  }[];
  passengers: ICoreSummaryPassenger[];
}

const TransferSummaryPassengerGroup = (
  props: TransferSummaryPassengerGroupProps,
) => {
  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="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={`${employeeIndex + 1}. Yetişkin`}
                />
              )}
            </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">
                  {guestIndex + 1}. Yetişkin
                </h3>
                <Badge variant="primary">{guest.label}</Badge>
              </div>
              <TransferSummaryInfoForm
                prefix={`${props.groupKey}-${guest.key}-guest`}
              />
            </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}. Çocuk
                </h3>
                <Badge variant="primary">{child.label}</Badge>
              </div>
              <TransferSummaryInfoForm
                prefix={`${props.groupKey}-${child.key}-child`}
              />
            </div>
          ))}
      </div>
    </Card>
  );
};

export default TransferSummaryPassengerGroup;