import React, { useEffect, useState } from 'react';
import { IIOTFaultAlarmProps } from './type';
import './style/index.less';
import AlarmTip from './AlarmTip';
import AlarmHigh from './AlarmHigh';
const prefixCls = 'iot-fault-alarm-out';



const IOTFaultAlarm: React.FC<IIOTFaultAlarmProps> = ({
    text,
    type,
    alarm,
    ...rest
}) => {
    const [lowShow, setLowShow] = useState(true);
    const [middleTipsShow, setMiddleTipsShow] = useState(false);
    const [currentLowCode, setCurrentLowCode] = useState<string | undefined>('');
    useEffect(() => {
        // console.log("call use effect....................");
        setCurrentLowCode('');
        if (type !== 'middle') {
            setMiddleTipsShow(false);
        }
    }, [type]);
    return (
        <>
            {(type === 'low' && (alarm?.code !== currentLowCode || lowShow)) && <div className={prefixCls} {...rest}>
                <div className='iot-fault-alarm'>
                    <div className='alarm-text'>
                        <div>故障: {text}</div>
                    </div>
                    <div className='alarm-right' onClick={() => {
                        setCurrentLowCode(alarm?.code);
                        setLowShow(false)
                    }}>
                        <div className='alarm-right-text'>关闭</div>
                    </div>
                </div>
            </div>}
            {type === 'middle' && <div className={prefixCls} {...rest}>
                <div className='iot-fault-alarm'>
                    <div className='alarm-text'>
                        <div>故障: {text}</div>
                    </div>
                    <div className='alarm-right' onClick={() => {
                        setMiddleTipsShow(true)
                    }}>
                        <div className='alarm-right-text'>查看详情</div>
                    </div>
                </div>
            </div>}
            {
                type === 'middle' && <AlarmTip show={middleTipsShow} {...alarm} handler={() => {
                    setMiddleTipsShow(false)
                }} />
            }
            {
                type === 'high' && <AlarmHigh {...alarm} handler={() => {
                    setMiddleTipsShow(false);
                    setLowShow(false);
                }} />
            }
        </>
    );
};

export default IOTFaultAlarm;