import { CSSProperties, useState, useEffect } from 'react'
import classNames from 'classnames'
import Loading from '../loading/Loading'
import { CommonComponentProps } from '../../utils/types'
import './Switch.scss'

export interface SwitchProps extends CommonComponentProps {
  className?: string
  style?: CSSProperties
  checked?: boolean
  defaultChecked?: boolean
  disabled?: boolean
  size?: string
  checkedColor?: string
  uncheckedColor?: string
  checkedValue?: any
  uncheckedValue?: any
  loading?: boolean
  onChange?: (check: any, value: any) => any
  onClick?: () => any
}

export function Switch(props: SwitchProps) {
  const {
    className,
    style,
    checked,
    defaultChecked,
    disabled = false,
    size,
    checkedColor,
    uncheckedColor,
    checkedValue = true,
    uncheckedValue = false,
    loading = false,
    onChange,
    onClick,
    ...restProps
  } = props

  const [innerChecked, setInnerChecked] = useState(
    checked || defaultChecked || false
  )
  // 受控
  if (checked != null) {
    useEffect(() => {
      setInnerChecked(checked)
    })
  }

  const onSwitchClick = () => {
    if (disabled || loading) {
      return
    }

    // 非受控
    if (checked == null) {
      setInnerChecked(!innerChecked)
    }

    onChange?.(!innerChecked, !innerChecked ? checkedValue : uncheckedValue)
    onClick?.()
  }

  const switchClass = classNames(
    's-switch',
    {
      's-switch-checked': innerChecked,
      's-switch-disabled': disabled,
      's-switch-is-loading': loading,
    },
    className
  )

  const switchStyle = {
    backgroundColor: innerChecked ? checkedColor : uncheckedColor,
    fontSize: size,
    ...style,
  }

  return (
    <div
      {...restProps}
      className={switchClass}
      style={switchStyle}
      onClick={onSwitchClick}
    >
      <div className="s-switch-thumb">
        {loading && <Loading className="s-switch-loading" />}
      </div>
    </div>
  )
}

export default Switch