import React from "react"
import PropTypes from "prop-types"
import cx from "classnames"

const STYLES = {
  padding: 2,
  width: 44,
  height: 24,
}

const DISABLED_STYLES = {
  filter: "grayscale(100%)",
  cursor: "not-allowed",
  opacity: 0.75,
  ...STYLES,
}

function ToggleInput({ checked, onChange, className, ...props }) {
  const backgroundColor = checked ? "bg-green-400" : "bg-gray-500"
  const thumbPosition = checked ? "translate-x-full" : "translate-x-0"
  const activeStyle = props.disabled ? DISABLED_STYLES : STYLES

  return (
    <div
      className={cx(
        `inline-flex rounded-full transition-colors duration-200 focus:outline-none focus:shadow-outline ${backgroundColor} relative`,
        className
      )}
      style={activeStyle}
    >
      <div
        className={`top-0 left-0 bg-white w-5 h-5 rounded-full transition-all duration-200 transform ${thumbPosition}`}
      />
      <input
        {...props}
        onChange={onChange}
        checked={checked}
        type="checkbox"
        className="appearance-none absolute w-full h-full"
      />
    </div>
  )
}

ToggleInput.propTypes = {
  checked: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  className: PropTypes.string,
}

export default ToggleInput
