import React from 'react';
import './ToggleButton.scss';

interface IToggleButtonProps {
  id: string
  text: string
  type?: ToggleType
  title: string
  checked: boolean
  onChange: React.ChangeEventHandler<HTMLInputElement>
}

export enum ToggleType {
  Material,
  IOS
}

export function ToggleButton(props: IToggleButtonProps): JSX.Element {
  const id = `toggle-${props.id}`;
  const type = props.type ?? ToggleType.Material;
  let classLine = 'line w-10 h-4 bg-gray-400 rounded-full shadow-inner';
  let classDot = 'dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition';
  if (type === ToggleType.IOS) {
    classLine = 'line block bg-gray-600 w-14 h-8 rounded-full';
    classDot = 'dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition';
  }

  return (
    <div title={props.title}>
      <div className="flex items-center justify-center w-full mb-12">
        <label
          htmlFor={id}
          className="flex items-center cursor-pointer"
        >
          <div className="relative">
            <input
              id={id}
              type="checkbox"
              onChange={props.onChange}
              checked={props.checked}
              className="sr-only" />
            <div className={classLine}></div>
            <div className={classDot}></div>
          </div>
          <div className="ml-3 text-gray-700 font-medium">
            {props.text}
          </div>
        </label>
      </div>
    </div>
  );
}