import { ChangeEvent, forwardRef, useRef } from 'react';
import classnames from 'classnames/bind';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import config from './styles/component-values-radio.module.css';
import styles from './styles/rt-radio.module.css';
import { RtRadioProps } from './rt-radio.types';

const cn = classnames.bind(styles);

export const RtRadio = forwardRef(
  (
    props: RtRadioProps & RtBaseProps<HTMLLabelElement>,
    ref: React.ForwardedRef<HTMLLabelElement>
  ) => {
    const {
      name,
      use,
      modifier,
      size = 'sm',
      width = 'min-content',
      height = 'min-content',
      isActive = false,
      disabled = false,
      isLoading = false,
      value,
      onChange,
    } = props;

    const inputRef = useRef<HTMLInputElement>(null);

    const {
      'data-size-scheme': dataSizeScheme,
      id,
      ...baseProps
    } = useRtBaseProps(props, '0.2.2');

    // TODO: status isLoading

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
      const { checked: value } = event.currentTarget;

      if (onChange) {
        onChange({ event, value, name: name || '', id });
      }
    };

    const state = disabled ? 'disabled' : isLoading ? 'loading' : undefined;

    return (
      <RtFrame
        isFontSizeProvider
        className={cn(
          'radio',
          `radio-container--width-${width}`,
          `radio-container--height-${height}`,
          config[`rt-radio-${size}`]
        )}
        data-size-scheme={dataSizeScheme}
      >
        <RtFrame
          {...baseProps}
          ref={ref}
          as="label"
          surface="control"
          use={use}
          modifier={modifier}
          surfaceState={state}
          tabIndex={disabled ? -1 : 1}
          className={cn(
            'radio__layer-radio',
            `radio__layer-radio--size-${size}`,
            'radio__layer-radio--transition',
            {
              [`radio__layer-radio--disabled`]: disabled,
              [`radio__layer-radio--checked`]: isActive,
            }
          )}
          onKeyUp={(e) => {
            if (e.code === 'Space') inputRef.current?.click();
          }}
        >
          <input
            ref={inputRef}
            className={cn('radio__native')}
            name={name}
            value={value}
            type="radio"
            onChange={handleChange}
            checked={isActive}
            id={id}
            onClick={(e) => {
              e.stopPropagation();
            }}
            aria-label={props.ariaLabel}
            aria-labelledby={props.ariaLabelledBy}
          />
          {isActive && <div className={cn('radio__icon-checked')} />}
        </RtFrame>
      </RtFrame>
    );
  }
);

RtRadio.displayName = 'RtRadio';