import { View } from "@tarojs/components"
import classnames from "classnames";
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import styles from "./index.module.scss"

type params = {
    onSelect?: () => void, //选择触发
    onClose?: () => void, //取消触发
    status?: false|true //是否选中
    disabled?: false|true //是否禁用
}
export default forwardRef(({onSelect, onClose, status = false, disabled = false}: params, ref) => {
    const [selected, SetSelected] = useState(false)
    const onSelectEven = () => {
        if(disabled) return false
        let res = !selected
        if(res) {
            onSelect?.()
        } else {
            onClose?.()
        }
        SetSelected(res)
    }
    useImperativeHandle(ref, () => ({
        onSelectEven
    }))
    useEffect(() => {
        SetSelected(status)
    }, [status])
    return (
        <>
            <View className={styles.checkbox_main}  onClick={() => onSelectEven()}>
                <View className={classnames(styles.checkbox_item, disabled&&styles.no_checkbox_item, selected&&styles.checkbox_item_select)}>
                    {selected&&<View className={classnames('iconfont', 'icon-tick', styles.miconfont)}></View>}
                </View>
            </View>
        </>
    )
})