import {
  BookingOptionGroup,
  BookingOptionPax,
  PerPackageOption,
  PerUnitPackageOption,
} from "@qite/tide-client/build/types";
import { isEmpty } from "lodash";
import React from "react";
import { buildClassName } from "../../../shared/utils/class-util";
import NoneOption from "./none-option";
import OptionItem from "./option-item";
import OptionPaxCard from "./option-pax-card";

interface OptionUnitGroupProps {
  unitIndex: number;
  optionId?: string;
  group: BookingOptionGroup<PerUnitPackageOption>;
  firstClassName: string;
  secondClassName: string;
  parentId: string;
  onGroupChange?: (
    group: BookingOptionGroup<PerUnitPackageOption>,
    unitIndex: number,
    optionId?: string
  ) => void;
}

const OptionUnitGroup: React.FC<OptionUnitGroupProps> = ({
  unitIndex,
  optionId,
  group,
  firstClassName,
  secondClassName,
  parentId,
  onGroupChange,
}) => {
  const handleOptionChange = (option: PerPackageOption, index: number) => {
    const updatedGroup = {
      ...group,
      options: group.options.map((o, i) => {
        return i === index
          ? option
          : {
              ...o,
              isSelected: option.requirementType === 2  || option.requirementType === 3 ? false : o.isSelected,
            };
      }),
    } as BookingOptionGroup<PerUnitPackageOption>;

    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
  };

  const handleChildGroupChange = (
    childGroup: BookingOptionGroup<PerUnitPackageOption>,
    unitIndex: number,
    optionId?: string
  ) => {
    const updatedGroup = {
      ...group,
      options: group.options.map((groupOption) => {
        return groupOption.line.entryLineGuid === optionId
          ? {
              ...groupOption,
              groups: groupOption.groups.map((optionGroup) => {
                return optionGroup.name === childGroup.name
                  ? childGroup
                  : optionGroup;
              }),
            }
          : groupOption;
      }),
    };

    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
  };

  const handleOnPaxChange = (pax: BookingOptionPax[], index?: number) => {
    const updatedGroup = {
      ...group,
      options: group.options.map((groupOption, i) => {
        return {
          ...groupOption,
          pax: i === index ? pax : groupOption.pax,
        };
      }),
    };

    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
  };

  const handleNoneSelectionChanged = () => {
    const updatedGroup = {
      ...group,
      options: group.options.map((groupOption) => ({
        ...groupOption,
        isSelected: false,
      })),
    };

    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
  };

  const selectedPrice =
    group.name === ""
      ? 0
      : group.options.find((x) => x.isSelected)?.line.price ?? 0;

  return (
    <div className={firstClassName}>
      {group.title && <h4 className={secondClassName}>{group.title}</h4>}
      <table className={buildClassName(["table", "table--striped"])}>
        <tbody>
          {group.options.map((option, index) => (
            <tr key={option.line.entryLineGuid}>
              <td>
                <div
                  className={buildClassName([
                    "tree",
                    option.isSelected && "tree--selected",
                  ])}
                >
                  <div className="tree__level">
                    <div className="tree__header">
                      <div className="tree__description-collapse">
                        <div
                          className={buildClassName([
                            (option.requirementType === 0 ||
                              option.requirementType === 1) &&
                              "checkbox",
                            (option.requirementType === 2 || option.requirementType === 3) && "radiobutton",
                          ])}
                        >
                          <label
                            htmlFor={`${parentId}_${index}`}
                            className={buildClassName([
                              (option.requirementType === 0 ||
                                option.requirementType === 1) &&
                                "checkbox__label",
                              (option.requirementType === 2  || option.requirementType === 3) &&
                                "radiobutton__label",
                            ])}
                          >
                            <OptionItem
                              option={option}
                              parentId={parentId}
                              index={index}
                              selectedPrice={selectedPrice}
                              onOptionChange={handleOptionChange}
                            />
                            {!isEmpty(option.groups) && (
                              <div className="tree__body">
                                {option.groups.map((optionGroup) => (
                                  <OptionUnitGroup
                                    unitIndex={unitIndex}
                                    optionId={option.line.entryLineGuid}
                                    group={optionGroup}
                                    firstClassName={"tree__level"}
                                    secondClassName={"tree__level-heading"}
                                    parentId={`${parentId}_${optionGroup.name}`}
                                    onGroupChange={handleChildGroupChange}
                                  />
                                ))}
                              </div>
                            )}
                            {!isEmpty(option.pax) && (
                              <OptionPaxCard
                                pax={option.pax}
                                parentIndex={index}
                                onPaxChange={handleOnPaxChange}
                              />
                            )}
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          ))}
          <NoneOption
            group={group}
            parentId={parentId}
            handleNoneSelectionChanged={handleNoneSelectionChanged}
          />
        </tbody>
      </table>
    </div>
  );
};

export default OptionUnitGroup;