import { View } from '@tarojs/components'
import classnames from 'classnames'
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import IconFont from '../iconfont'
import styles from './index.module.scss'

type CheckboxSize = 'normal' | 'small'

type params = {
  onSelect?: () => void //选择触发
  onClose?: () => void //取消触发
  status?: boolean //是否选中
  disabled?: boolean //是否禁用
  triggerLabel?: boolean   // 点击label是否触发选中
  circle?: boolean
  round?: boolean
  size?: CheckboxSize
  children?: React.ReactNode
  customStyles?: React.CSSProperties
  customClassName?: string
  customTextClass?: string
}
export default forwardRef((props: params, ref) => {
  const {
    onSelect,
    onClose,
    status = false,
    disabled = false,
    circle = false,
    round = true,
    triggerLabel = true,
    size = 'normal',
    children,
    customStyles = {},
    customClassName = '',
    customTextClass = '',
  } = props
  const [selected, SetSelected] = useState(false)
  const onSelectEven = () => {
    if (disabled) return false
    let res = !selected
    if (res) {
      onSelect?.()
    } else {
      onClose?.()
    }
    SetSelected(res)
  }

  const handleClickChildren = (event) => {
    if (!triggerLabel){
      return event.stopPropagation()
    }
  }

  const getMainClassName = () => {
    const classObject = {
      [styles['checkbox_main--selected']]: selected,
      [styles[`checkbox_main--${size}`]]: size,
      [styles['checkbox_main--round']]: round,
      [styles['checkbox_main--circle']]: circle,
    }
    return classObject
  }

  const getClassName = () => {
    const classObject = {
      [styles.no_checkbox_item]: disabled,
      [styles.checkbox_item_select]: selected,
    }
    return classObject
  }

  useImperativeHandle(ref, () => ({
    onSelectEven,
  }))
  useEffect(() => {
    SetSelected(status)
  }, [status])
  return (
    <View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
      <View className={classnames(styles.checkbox_main, getMainClassName())}>
        <View className={classnames(styles.checkbox_item, getClassName())}>
          {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
        </View>
      </View>
      {children && (
        <View className={classnames(styles['checkbox--text'], customTextClass)} onClick={handleClickChildren}>
          {children}
        </View>
      )}
    </View>
  )
})