import { RtToggleProps } from './rt-toggle.types';
import styles from './styles/rt-toggle.module.css';
import config from './styles/toggle-config.module.css';
import className from 'classnames/bind';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { RtFrame } from '@dpa/react-frame-intro';
import { ChangeEvent, useRef } from 'react';
import { RtSpinner } from '@dpa/react-loaders';

const cn = className.bind(styles);

export function RtToggle(props: RtToggleProps & RtBaseProps<HTMLDivElement>) {
  const {
    size = 'md',
    activeUse = 'success',
    radius = 'primary',
    width = 'min-content',
    height = 'min-content',
    isActive = false,
    isLoading,
    disabled,
  } = props;

  const baseProps = useRtBaseProps(props, '0.2.2');
  const inputRef = useRef<HTMLInputElement>(null);

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

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    props.onChange?.({ event, value: event.target.checked, name: props.name });
  }

  function handleClick() {
    setTimeout(() => {
      inputRef.current?.blur();
    }, 0);
  }

  return (
    <RtFrame
      isFontSizeProvider
      className={cn(
        config[`rt-toggle-${size}`],
        'rt-toggle-container',
        `rt-toggle-container--min-height-${height}`,
        `rt-toggle-container--min-width-${width}`
      )}
      {...baseProps}
    >
      <RtFrame
        as="label"
        use={isActive || isLoading ? activeUse : 'generic'}
        className={cn('rt-layer-toggle', `rt-layer-toggle--${radius}`, {
          'rt-layer-toggle--loading': isLoading,
          'rt-layer-toggle--disabled': disabled,
          'rt-layer-toggle--is-active': isActive,
        })}
        surface="control"
        modifier={isLoading ? 'coloring' : 'base'}
        surfaceState={surfaceState}
        onMouseUp={handleClick}
        onKeyUp={(e) => {
          if (e.code === 'Space') inputRef.current?.click();
        }}
      >
        <RtFrame
          as="div"
          surface="control"
          use="achromatic-cloudy"
          className={cn('rt-toggle-knob', {
            'rt-toggle-knob--is-active': isActive,
            'rt-toggle-knob--loading': isLoading,
          })}
        />
        {!!isLoading && (
          <RtSpinner
            size="sm"
            specification="main"
            width="min-content"
            height="min-content"
          />
        )}

        <input
          name={props.name}
          type="checkbox"
          onChange={handleChange}
          disabled={disabled}
          checked={isActive}
          className={cn('rt-toggle__native')}
          value={props.value || Number(isActive)}
          ref={inputRef}
          onClick={(e) => {
            e.stopPropagation();
          }}
          aria-label={props.ariaLabel}
          aria-labelledby={props.ariaLabelledBy}
        />
      </RtFrame>
    </RtFrame>
  );
}

RtToggle.displayName = 'RtToggle';