import React, { Component, useState } from 'react'
import { Layout, Badge, Popover, Menu, Modal, Tooltip, Popconfirm } from 'antd'
import { AntIcon, Container } from 'components'
import store from 'store'
import { api } from 'common/api'

import Logo from '../logo'
import Search from './search'
import Weather from './weather'
import Notice from './notice'
import User from './user'

const { getState, subscribe, dispatch } = store

export default class index extends Component {
    state = {
        ...getState('layout'),
    }

    constructor(props) {
        super(props)

        this.unsubscribe = subscribe('layout', state => {
            this.setState(state)
        })
    }

    componentWillUnmount() {
        this.unsubscribe()
    }

    onCollapsed() {
        dispatch({
            type: 'TOGGLE_COLLAPSED',
            siderCollapsed: !this.state.siderCollapsed,
        })
    }

    render() {
        const { allowSiderCollapsed, theme } = this.state
        return (
            <Layout.Header>
                <Container mode="fluid">
                    <div className="header-actions">
                        {allowSiderCollapsed && (
                            <span
                                className="header-action mr-md"
                                onClick={() => this.onCollapsed()}
                            >
                                <AntIcon type="menu" />
                            </span>
                        )}
                        <Logo />
                        <Search />
                    </div>
                    <div className="header-actions">
                        <Weather />
                        <Tooltip placement="bottom" title="重新加载框架">
                            <span
                                className="header-action"
                                onClick={() => window.reloadContentWindow()}
                            >
                                <AntIcon type="reload" />
                            </span>
                        </Tooltip>
                        <Notice />
                        <Tooltip
                            placement="bottom"
                            title={`切换到${{ default: '夜间', dark: '默认' }[theme]}模式`}
                        >
                            <Popconfirm
                                placement="bottomRight"
                                title="切换模式将刷新整个页面,是否继续?"
                                onConfirm={() => {
                                    dispatch({
                                        type: 'SET_THEME',
                                        theme: { default: 'dark', dark: 'default' }[theme],
                                    })
                                    window.location.reload()
                                }}
                            >
                                <span className="header-action">
                                    <div className="theme-toggle">
                                        <div className="theme-toggle--real" />
                                        <div className="theme-toggle--imaginary" />
                                    </div>
                                </span>
                            </Popconfirm>
                        </Tooltip>
                        <User />
                    </div>
                </Container>
            </Layout.Header>
        )
    }
}
