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;