import * as React from 'react';
import clsx from 'clsx';
import styles from './style.module.css';
import {ToggleButtonDerivedElement} from '@/categories/option/react';

export type ToggleSwitchDerivedElement = HTMLInputElement;

export interface ToggleSwitchProps extends Omit<React.InputHTMLAttributes<ToggleSwitchDerivedElement>, 'type' | 'size'> {
  block?: boolean;
  subtext?: React.ReactNode;
  badge?: React.ReactNode;
  indeterminate?: boolean;
  checkedLabel?: React.ReactNode;
  uncheckedLabel?: React.ReactNode;
}

export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleSwitchProps>(({
  uncheckedLabel,
  checkedLabel,
  block = false,
  id: idProp,
  className,
  subtext,
  badge,
  style,
  indeterminate = false,
  ...etcProps
}, forwardedRef) => {
  const defaultRef = React.useRef<ToggleButtonDerivedElement>(null);
  const ref = forwardedRef ?? defaultRef;
  const defaultId = React.useId();
  const id = idProp ?? defaultId;

  React.useEffect(() => {
    if (!(typeof ref === 'object' && ref)) {
      return;
    }
    const { current: element } = ref;
    if (!element) {
      return;
    }
    element.indeterminate = indeterminate;
  }, [indeterminate, ref]);

  return (
    <div
      className={clsx(
        'gap-x-4 flex-wrap',
        block && 'flex',
        !block && 'inline-flex align-center',
        className,
      )}
      style={style}
    >
      <input
        {...etcProps}
        ref={ref}
        type="checkbox"
        id={id}
        className={clsx(
          'sr-only peer/radio',
          styles['toggle-switch'],
        )}
      />
      <label
        htmlFor={id}
        className="peer/children order-3 cursor-pointer peer-disabled/radio:cursor-not-allowed"
      >
        <span
          data-testid="children"
        >
          {checkedLabel}
        </span>
      </label>
      <label
        htmlFor={id}
        className="peer/children order-1 cursor-pointer peer-disabled/radio:cursor-not-allowed"
      >
        {uncheckedLabel && (
          <span
            data-testid="uncheckedLabel"
          >
            {uncheckedLabel}
          </span>
        )}
      </label>
      <label
        htmlFor={id}
        className={clsx(
          'order-2 block rounded-full ring-secondary/50 overflow-hidden gap-4 leading-none select-none cursor-pointer',
          'peer-focus/radio:outline-0 peer-focus/radio:ring-4 peer-focus/radio:ring-secondary/50',
          'active:ring-tertiary/50 active:ring-4',
          'peer-active/children:ring-tertiary/50 peer-active/children:ring-4 peer-active/children:text-tertiary',
          'peer-disabled/radio:opacity-50 peer-disabled/radio:cursor-not-allowed peer-disabled/radio:ring-0',
          'text-primary peer-disabled/radio:text-primary peer-focus/radio:text-secondary peer-checked/radio:text-tertiary active:text-tertiary',
          !uncheckedLabel && '-ml-4',
        )}
      >
        <span>
          <span>
            <span>
              <span />
            </span>
          </span>
        </span>
      </label>
      {subtext && (
        <div
          className={clsx(
            'block w-full font-semi-expanded text-xs order-4',
            !uncheckedLabel && 'pl-16',
            uncheckedLabel && 'pt-2',
          )}
          data-testid="subtext"
        >
          {subtext}
        </div>
      )}
    </div>
  )
});

ToggleSwitch.displayName = 'ToggleSwitch';
