import React, { useState, useEffect } from 'react';
import { useModel, useLocation, useIntl } from 'umi';
import styles from './index.less';
import { MenuFoldOutlined, SmileOutlined } from '@ant-design/icons';
import Icon from '@/tenants-ui/Icon';

import { Drawer, notification } from 'antd';
import NavMenu from '@/components/navMenu';

export default (props) => {
  const { menuVisible, closeMenu, toggleMenu } = useModel('controller');

  const [notifyList] = useState([
    {
      title: '管理员操作指南',
      id: 'notify1',
      content: '具体介绍管理员权限下的管理功能及相关操作说明。',
    },
    { title: 'sagacare介绍', id: 'notify2', content: '环境健康主动管理服务' },
  ]);
  const showMenuClick = () => {
    //toggleMenu(); //todo
  };

  const openNotification = () => {
    //debugger;
    notifyList.map((item, index) => {
      notification.open({
        key: item.id,
        message: item.title,
        description: item.content,
        duration: 0,
        onClick: () => {
          console.log('Notification Clicked!');
        },
        icon: <SmileOutlined style={{ color: '#108ee9', fontSize: 32 }} />,
        style: {
          width: 400,
          borderRadius: 30,
        },
        closeIcon: <></>,
      });
    });
  };
  const closeNotify = () => {
    //console.log('close-notify');
    notifyList.map((item, index) => {
      notification.close(item.id);
    });
  };

  useEffect(() => {
    document.querySelector('#root').addEventListener('click', closeNotify, true);
    return () => {
      console.log('layout-useEffect-off');
      document.querySelector('#root').removeEventListener('click', closeNotify, true);
    };
  }, []);

  return (
    <div className={styles.layout}>
      <div className={styles.header}>
        <div className={styles.title}>之江项目</div>
        <div className={styles.right}>
          <div className={styles.picture}></div>
          <div
            onClick={(event) => {
              event.stopPropagation();
              // openNotification(); //todo
            }}
          >
            <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
          </div>
          <MenuFoldOutlined style={{ fontSize: 24 }} onClick={showMenuClick} />
        </div>
      </div>

      {props.children}
      <Drawer
        title=""
        placement="right"
        closable={false}
        onClose={closeMenu}
        visible={menuVisible}
        drawerStyle={
          {
            //   height: 340,
            //   width: 380,
            //   background: 'transparent',
            //   transform: 'translate(-50px,20px)',
            // top: 100,
            //right: 20,
          }
        }
        maskStyle={{ background: 'transparent' }}
        contentWrapperStyle={{ boxShadow: 'none' }}
        bodyStyle={{ transform: 'translate(-20px,20px)' }}
      >
        <NavMenu></NavMenu>
      </Drawer>
    </div>
  );
};
