import React, { useEffect, useState } from 'react';

import './index.less';
interface IOTBottomSlideProps {
    leftText: string;
    rightText: string;
    title?: string;
    isShow: boolean;
    type:string;
    confirmHandler: (val: any) => void;
}

const IOTBottomSlide: React.FC<IOTBottomSlideProps> = (props) => {
    const [state,setState] =useState(false);
    useEffect(() => {
        setTimeout(() => {
            setState(props.isShow)
        },0)
    },[props.isShow])
    return (
        <>
            {props.isShow && (<div className="iot-bottom-slide">
                <div className="iot-bottom-layer" style={{ bottom: state ? '0' : '-80%' }}>
                    {
                        props.type === "com" && (
                            <div className="top" >
                            <div className="left" onClick={() => {
                                props.confirmHandler(false);
                            }}>{props.leftText}</div>
                             <div className='middles'>{props.title}</div> 
                            <div className="right" onClick={() => {
                                props.confirmHandler(true);
                            }}>{props.rightText}</div>
                        </div>
                        )
                    }
                      {
                        props.type === "show" && (
                            <div className="top" >
                            <div className="left-show" onClick={() => {
                            }}> <div className='middle-show'>{props.leftText} </div> </div>
                            <div className="right" onClick={() => {
                                props.confirmHandler(false);
                            }}>{props.rightText}</div>
                        </div>
                        )
                    }
                  

                    <div className="iot-bottom-context">
                        {props.children}
                    </div>
                </div>
            </div>)
            }
        </>

    );
};

export default IOTBottomSlide;