import { Checkbox, Tooltip } from "antd"
import { CheckboxChangeEvent } from "antd/lib/checkbox"
import React, { useEffect, useState } from "react"



interface Props {
    title?: string
}
/**
 * 是否使用虚拟列表
 * @param param0 
 * @returns 
 */
const IsVirtually: React.FC<Props> = ({ title }) => {

    const [check, setCheck] = useState<boolean>(false)

    const onChange = (e: CheckboxChangeEvent) => {
        if (title) {
            let tableNames = localStorage.getItem('TABLENAMES') || ''
            if (e.target.checked) {
                tableNames = tableNames + ',' + title
            } else {
                let tableNamesArray = tableNames.split(',')
                const result = tableNamesArray.filter(item => item !== title);
                tableNames = result.join(',')
            }
            localStorage.setItem('TABLENAMES', tableNames)
            window.location.reload()
        }
    }

    useEffect(() => {
        if (title) {
            const tableNames = localStorage.getItem('TABLENAMES') || ''
            setCheck(tableNames.split(',').includes(title))
        }
    }, [localStorage.getItem('TABLENAMES')])

    
    return <div style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }}>
        <Tooltip title='列表卡顿，渲染慢可勾选切换虚拟列表表格' placement="left">
            <Checkbox onChange={onChange} checked={check}/>
        </Tooltip>
    </div>
}

export default React.memo(IsVirtually)