import useNewToken from "@/Hook/useNewToken";
import { useSize } from "ahooks";
import { Button, Card, Space } from "antd"
import { useCallback, useEffect, useRef, useState } from "react";
import { DownOutlined, UpOutlined } from '@ant-design/icons';
type Props = {
    children?: JSX.Element,
}
/**
 *@param children 搜索条件组件<>...<Input/></>
 * */
function TextShow(props: Props) {
    const { children } = props
    const ref: any = useRef(null);
    const refBox: any = useRef(null);
    const [show, setShow] = useState(false)
    const [setHeight, set_setHeight] = useState(false)
    const { token } = useNewToken()
    const size = useSize(ref);
    const sizeBox = useSize(refBox);
    const [btnMinWidth, setBtnMinWindth] = useState(-1)
    const [chiMinWidth, setChiMinWindth] = useState(-1)
    const [initHeight, setInitHeight] = useState(20)
    const showDiv = useCallback(() => {
        set_setHeight(!setHeight)
    }, [setHeight])
    useEffect(() => {
        if (ref?.current && size.height) {
            let divH: any = size.height
            let childrenH = ref?.current?.children[0]?.offsetHeight
            let initH = ref?.current?.children[0]?.children[0].offsetHeight
            setInitHeight(initH)
            if (initH >= childrenH || !childrenH) {
                setShow(false)
            } else {
                setShow(true)
            }
        }
    }, [size, ref])
    useEffect(() => {
        if (ref.current && sizeBox.width && size.width) {
            // console.log(sizeBox.width, size.width, sizeBtn.width)
            let chis = ref?.current?.children[0]?.children
            let wArr: any = [0]
            let cArr: any = []
            Array(chis?.length).fill('').forEach((a, b) => {
                cArr[b] = chis[b].offsetWidth + 8
            })
            let maxBtnW = Math.max(...wArr)
            if (sizeBox.width - size.width < 75) {
                let newCw = 0
                for (let cw of cArr) {
                    if (newCw + cw <  sizeBox.width) {
                        newCw += cw
                    }
                }
                setChiMinWindth(newCw)
                setBtnMinWindth(maxBtnW)
            }
        }
    }, [sizeBox, refBox, size, ref])
    return <div style={{ background: token.colortRansparency, borderRadius: 0, borderTop: 0, borderRight: 0, borderLeft: 0, padding: 0, }} ref={refBox}>
        {children && <div style={{ flexShrink: 1, marginRight: !show ? 20 : 0 }} >
            <div ref={ref} style={{ height: setHeight ? 'auto' : initHeight, float: 'left', overflow: 'hidden', width: chiMinWidth !== -1 ? chiMinWidth : 'auto' }}>
                <Space wrap size={[0, 0]}>
                    {children}
                </Space>
            </div>
        </div>}
        <div style={{ height: setHeight ? 'auto' : initHeight, float: 'right', overflow: 'hidden', flexShrink: 1, display: 'flex', justifyContent: !show ? 'flex-start' : 'space-between', alignItems: 'center', width: btnMinWidth === -1 ? 'auto' : btnMinWidth + 75 }} >
            {show && <Space><div style={{ flexShrink: 1, width: '75px' }}><Button type="link" size="small" onClick={showDiv}>{!setHeight ? <> 展开 <DownOutlined /> </> : <>收起 <UpOutlined /></>}</Button></div></Space>}
        </div>
    </div >
}

export default TextShow