import React from 'react';
import {CloudServerOutlined, DashboardOutlined, GlobalOutlined, HomeOutlined} from '@ant-design/icons';
import {Layout, Menu} from 'antd';
import {Outlet, useNavigate} from "react-router";


const {Content, Footer, Sider} = Layout;

const items = [{
    key: "home", icon: React.createElement(HomeOutlined), label: "Home", "data-navigate": "/",
}, {
    key: "proxy", icon: React.createElement(CloudServerOutlined), label: "Smart Proxy", children: [{
        key: "proxy/overview",
        icon: React.createElement(DashboardOutlined),
        label: "Overview",
        "data-navigate": "/proxy",
    }, {
        key: "proxy/origins",
        icon: React.createElement(GlobalOutlined),
        label: "Web Origins",
        "data-navigate": "/proxy/origins",
    }]
}];

export default function BaseLayout() {
    const navigate = useNavigate();
    // @ts-ignore TODO
    const addOnClick = (items) => {
        // @ts-ignore TODO
        return items.map((item) => {
            return item ? {
                ...item,
                children: item.children ? addOnClick(item.children) : null,
                onClick: item["data-navigate"] ? () => {
                    navigate(item["data-navigate"]);
                } : undefined
            } : null;
        })
    };
    const menuItems = addOnClick(items);
    return (<Layout>
            <Sider
                breakpoint="lg"
                collapsedWidth="0"
                onBreakpoint={(broken) => {
                    console.log(broken);
                }}
                onCollapse={(collapsed, type) => {
                    console.log(collapsed, type);
                }}
                style={{height: "100vh"}}
            >
                <h1 className="logo" onClick={() => navigate("/")}>
                    <img src="https://jasima.app/img/logo.png" alt=""/>
                    jasima.app
                </h1>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['a']} items={menuItems}/>
            </Sider>
            <Layout>
                <Content style={{margin: '24px 16px 0'}}>
                    <div
                        style={{
                            padding: 24, minHeight: 360, background: "white",
                        }}
                    >
                        <Outlet/>
                    </div>
                </Content>
                <Footer style={{textAlign: 'center'}}>
                    Copyright © 2021-{new Date().getFullYear()} SR2 Communications Limited.
                </Footer>
            </Layout>
        </Layout>)
}