import {
  BookingOptionGroup,
  PerBookingPackageOption,
} from "@qite/tide-client/build/types";
import { isEmpty, isNil } from "lodash";
import React from "react";
import { getDateText } from "../sidebar/sidebar-util";
import SummaryBookingOptionPax from "./summary-booking-option-pax";
import SummaryBookingOptionUnit from "./summary-booking-option-unit";

interface SummaryPerBookingOptionGroupProps {
  group: BookingOptionGroup<PerBookingPackageOption>;
}

const SummaryPerBookingOptionGroup: React.FC<
  SummaryPerBookingOptionGroupProps
> = ({ group }) => {
  const groupOptions = group.options.filter((x) => x.isSelected);

  return (
    <li className="list__item">
      <h6>{group.title}</h6>

      <ul className="list">
        {groupOptions.map((opt) => (
          <li key={opt.line.entryLineGuid} className="list__item">
            {opt.line.productName}
            {": "}
            {opt.line.accommodationName}
            {!isNil(opt.line?.regimeName) && ", "}
            {opt.line.regimeName}
            <br />
            {getDateText(opt.line.startDate)}
            {opt.line.startDate != opt.line.endDate
              ? ` > ${getDateText(opt.line.endDate)}`
              : ""}

            <ul>
              {!isEmpty(opt?.groups) &&
                opt?.groups.map((x) => {
                  if (!x.options.some((y) => y.isSelected)) return;

                  return <SummaryPerBookingOptionGroup group={x} />;
                })}
              {!isEmpty(opt?.units) &&
                opt?.units.map((x) => <SummaryBookingOptionUnit unit={x} />)}
              {!isEmpty(opt?.pax) &&
                opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
            </ul>
          </li>
        ))}
      </ul>
    </li>
  );
};

export default SummaryPerBookingOptionGroup;