import {
  BookingOptionGroup,
  PerPaxPackageOption,
} from "@qite/tide-client/build/types";
import { isEmpty, isNil } from "lodash";
import React from "react";
import { getDateText } from "../sidebar/sidebar-util";

interface SummaryPerPaxOptionGroupProps {
  group: BookingOptionGroup<PerPaxPackageOption>;
}

const SummaryPerPaxOptionGroup: React.FC<SummaryPerPaxOptionGroupProps> = ({
  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 className="list">
            {!isEmpty(opt?.groups) &&
              opt?.groups.map((x) => {
                if (!x.options.some((y) => y.isSelected)) return;

                return <SummaryPerPaxOptionGroup group={x} />;
              })}
          </ul>
        </li>
      ))}
    </>
  );

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

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

export default SummaryPerPaxOptionGroup;