import {
  BookingOptionGroup,
  PerBookingPackageOption,
  PerPaxPackageOption,
  PerUnitPackageOption,
} from "@qite/tide-client/build/types";
import React from "react";
import { buildClassName } from "../../../shared/utils/class-util";
import { formatPrice } from "../../../shared/utils/localization-util";
import { useSelector } from "react-redux";
import { selectTranslations } from "../booking/selectors";

interface NoneOptionProps {
  group:
    | BookingOptionGroup<PerBookingPackageOption>
    | BookingOptionGroup<PerUnitPackageOption>
    | BookingOptionGroup<PerPaxPackageOption>;
  parentId: string;
  handleNoneSelectionChanged: () => void;
}

const NoneOption: React.FC<NoneOptionProps> = ({
  group,
  parentId,
  handleNoneSelectionChanged,
}) => {
  const translations = useSelector(selectTranslations);
  const selectedOption = group.options.find((x) => x.isSelected);
  const showNoneOption = group.options.some((x) => x.requirementType === 2);
  const noneSelected = !selectedOption;
  const priceDifferencetext = selectedOption
    ? `- ${formatPrice(Math.abs(selectedOption.line.price))}`
    : "";

  return (
    <>
      {showNoneOption && (
        <tr>
          <td>
            <div
              className={buildClassName([
                "tree",
                noneSelected && "tree--selected",
              ])}
            >
              <div className="tree__level">
                <div className="tree__header">
                  <div className="tree__description-collapse">
                    <div className="radiobutton">
                      <div className="radiobutton__label">
                        <input
                          type="radio"
                          value={undefined}
                          id={`${parentId}_NONE`}
                          name={parentId}
                          className={buildClassName([
                            "radiobutton__input",
                            "radiobutton__input--parent",
                          ])}
                          defaultChecked={noneSelected}
                          onChange={handleNoneSelectionChanged}
                        ></input>
                        <span className="radiobutton__label-text">
                          <div className="date-list">
                            <span
                              className={buildClassName([
                                "date-list__item",
                                "date-list__item--none",
                              ])}
                            ></span>
                          </div>
                        </span>
                        <div className="tree__columns-actions">
                          <div className="tree__columns">
                            <div className="tree__column">
                              <label
                                htmlFor={`${parentId}_NONE`}
                                className={buildClassName([
                                  "tree__product-name",
                                  "tree__product-name--none",
                                ])}
                              >
                                {translations.OPTIONS_FORM.NONE}
                              </label>
                            </div>
                            <div className="tree__column"></div>
                            <div className="tree__column"></div>
                            <div
                              className={buildClassName([
                                "tree__column",
                                "tree__column--price",
                              ])}
                            >
                              {!noneSelected && (
                                <span
                                  className={buildClassName([
                                    "price",
                                    "price--decrease",
                                  ])}
                                >
                                  {priceDifferencetext}
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      )}
    </>
  );
};

export default NoneOption;