/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {Fragment} from 'react';

import {Tooltip, Position} from 'components/tooltip';
import {Label} from 'components/label';
import {ComponentWrapper, HelperText, RadioGroup, RadioWrapper, RadioButtonContainer, VisibleRadioButton} from './style';

interface IRadioItem {
  label: string;
  value: string;
  tooltipMessage?: string;
  tooltipPosition?: Position;
  className?: string;
  children?: React.JSX.Element;
  disabled?: boolean;
}

interface IRadioButtonGroup {
  label?: string;
  labelColor?: string;
  labelIcon?: React.JSX.Element;
  labelClassName?: string;
  items: IRadioItem[];
  onChange: (value) => void;
  currentValue: string;
  error?: boolean;
  helperText?: string;
  helperTextClassName?: string;
  width?: number | string; // TODO check after refactoring if it possible to restrict width
  className?: string;
  radioGroupClassName?: string;
}

interface IRadioButton {
  currentValue: string;
  value: string;
}

export const RadioButton = ({currentValue, value}: IRadioButton) => (
  <RadioButtonContainer>
    <input type="radio" readOnly={true} value={value} checked={currentValue === value} />
    <VisibleRadioButton checked={currentValue === value}>
      <div />
    </VisibleRadioButton>
  </RadioButtonContainer>
);

export const RadioButtonGroup = ({
  label: propLabel,
  labelColor,
  labelIcon,
  labelClassName,
  items,
  onChange,
  currentValue,
  helperText,
  helperTextClassName,
  error,
  width,
  className: propClassName,
  radioGroupClassName
}: IRadioButtonGroup): React.JSX.Element => {
  return (
    <ComponentWrapper width={width} className={propClassName}>
      {!!propLabel && <Label text={propLabel} color={labelColor} icon={labelIcon} className={labelClassName} />}
      <RadioGroup className={radioGroupClassName} color={labelColor}>
        {items.map(({label, value, disabled, tooltipPosition, tooltipMessage, children, className}: IRadioItem, index: number) => {
          const handleOnClick = () => {
            onChange(value);
          };

          return (
            <RadioWrapper
              tabIndex={-1}
              onKeyPress={() => null}
              disabled={disabled}
              className="button-container"
              role="button"
              key={label + index}
              onClick={handleOnClick}>
              <RadioButton value={value} currentValue={currentValue} />
              <Fragment>
                {tooltipMessage ? (
                  <Tooltip position={tooltipPosition} message={tooltipMessage}>
                    <Label className={className} text={label} />
                  </Tooltip>
                ) : (
                  <Label className={className} text={label} />
                )}
                {children}
              </Fragment>
            </RadioWrapper>
          );
        })}
      </RadioGroup>
      {!!helperText && (
        <HelperText className={helperTextClassName} error={error}>
          {helperText}
        </HelperText>
      )}
    </ComponentWrapper>
  );
};
