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 { selectCurrencyCode, 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 currencyCode = useSelector(selectCurrencyCode);
  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), currencyCode)}` : '';

  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;