import {
  BookingOptionGroup,
  PerUnitPackageOption,
} 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";

interface SummaryPerUnitOptionGroupProps {
  group: BookingOptionGroup<PerUnitPackageOption>;
}

const SummaryPerUnitOptionGroup: React.FC<SummaryPerUnitOptionGroupProps> = ({
  group,
}) => {
  const groupOptions = group.options.filter((x) => x.isSelected);

  const renderOptions = () => (
    <>
      {groupOptions.map((opt) => (
        <li key={opt.line.entryLineGuid} className="list__item">
          {opt.line.productName}
          <ul>
            <li>
              {opt.line.accommodationName}
              {!isNil(opt.line?.regimeName) && ", "}
              {opt.line.regimeName}
            </li>
          </ul>
          {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 <SummaryPerUnitOptionGroup group={x} />;
              })}
            {!isEmpty(opt?.pax) &&
              opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
          </ul>
        </li>
      ))}
    </>
  );

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

          <ul className="list">{renderOptions()}</ul>
        </li>
      ) : (
        <>{renderOptions()}</>
      )}
    </>
  );
};

export default SummaryPerUnitOptionGroup;