import React from 'react';

/**
 * Accessible on/off switch.
 *
 * A locked switch (Pro feature on the free plan) renders unchecked, announces itself as
 * unavailable and reports clicks through onLockedClick instead of changing its value.
 * `danger` gives the red variant used by "Bulk edit on Google Sheet".
 */
const Toggle = ({ id, name, checked, onChange, locked = false, onLockedClick, disabled = false, danger = false, describedBy }) => (
  <span className={`osgsw-switch${danger ? ' osgsw-switch--danger' : ''}${locked ? ' is-locked' : ''}`}>
    <input
      type="checkbox"
      role="switch"
      id={id}
      name={name}
      className="osgsw-switch__input"
      checked={!locked && Boolean(checked)}
      disabled={disabled}
      aria-disabled={locked || undefined}
      aria-describedby={describedBy}
      onChange={(e) => {
        if (locked) return;
        onChange(e.target.checked);
      }}
      onClick={(e) => {
        if (locked) {
          e.preventDefault();
          if (onLockedClick) onLockedClick();
        }
      }}
    />
    <span className="osgsw-switch__track" aria-hidden="true">
      <span className="osgsw-switch__thumb" />
    </span>
  </span>
);

export default Toggle;