import './App.css'
import { useAuth, hasAuthParams } from "react-oidc-context";
import React, {useState} from 'react';
import {
    SettingOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {Breadcrumb, type MenuProps} from 'antd';
import { Layout, Menu, theme } from 'antd';
import Home from "./Home.tsx";
import {Route, Routes, useLocation, useNavigate} from "react-router";
import Profile from "./Profile.tsx";
import {type UserContextType} from './UserContext.tsx';
import {UserContext} from './UserContext.tsx';
import type {userObject} from "./UserContext.tsx";

import {type OrgContextType} from './OrgContext.tsx';
import {OrgContext} from './OrgContext.tsx';
import type {orgObject} from "./OrgContext.tsx";

const { Header, Content, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];


function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}


const App: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();
    /*******************
    SIGNING IN WITH OIDC
    *******************/
    const auth = useAuth();
    const hasTriedSignin = React.useRef(false);
    // automatically sign-in
    React.useEffect(() => {
        if (!hasAuthParams() &&
            !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading &&
            !hasTriedSignin.current
        ) {
            auth.signinRedirect();
            hasTriedSignin.current = true;
        }
    }, [auth]);

    const defaultUser: UserContextType = {
        currentUser: {
            first_name: "",
            last_name: "",
            email: "",
            organisations: []
        },
        setCurrentUser: () => {}
    }

    const defaultOrg: OrgContextType = {
        currentOrg: {
            billing_contact: "",
            owner_contact: "",
            name: "",
            status: "",
            root_user: "",
            security_contact: "",
        },
        setCurrentOrg: () => {}
    }

    const [currentUser, setCurrentUser] = useState<userObject>(defaultUser.currentUser);
    const [currentOrg, setCurrentOrg] = useState<orgObject>(defaultOrg.currentOrg);

    //  STRILL NEEDS SOMETHING TO get CURRENT USER ORGS and map first one to a CURRENT ORG fetched from the API
    // STILL NEEDS THE WRAPPER IN THE RETURN STATEMETNS
    /*****************************
     GETTING CURRENT USER FROM API
     *****************************/
   // const [current_user, setUser] = useState<User | null>(null);

    React.useEffect(() => {
        (async () => {
            if (!auth.user) { return }
            try {
                const token = auth.user.access_token;
                const response = await fetch("/api/v1/user/self/db", {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                });
                setCurrentUser(await response.json());
            } catch (e) {
                console.error(e);
            }
        })();
    }, [auth]);


    if (!currentUser) {
        return(
            <UserContext.Provider value={{ currentUser, setCurrentUser }}>
                <div>Determining your existing user...</div>;
            </UserContext.Provider>
        );
    }

    if (auth.isLoading) {
        return(
            <UserContext.Provider value={{ currentUser, setCurrentUser }}>
                <div>Signing you in/out...</div>;
            </UserContext.Provider>
        );
    }

    if (!auth.isAuthenticated) {
        return(
            <UserContext.Provider value={{ currentUser, setCurrentUser }}>
                <div>Unable to log in</div>;
            </UserContext.Provider>
        );
    }



    const onClick: MenuProps['onClick'] = (e) => {
        switch (e.key) {
            case 'profile':
                navigate('/profile');
                break;
            case 'logout':
                auth.removeUser().then(r => navigate('/profile'));
                break;
            default:
                console.log('Clicked item:', e.key);
        }
    };


    //const organisations: [] = current_user.organisations;

    const side_nav_items: MenuItem[] = currentUser.organisations && [
        getItem('Files', '9', <SettingOutlined />),
    ];

    const top_nav_items = [
        getItem(currentUser.first_name + " " +currentUser.last_name , 'account', <UserOutlined />, [getItem('Account details', 'profile'), getItem('Log out', 'logout')]),
        getItem("Organisation Settings", 'orgsettings', <SettingOutlined />),
    ];
    return (
        <UserContext.Provider value={{ currentUser, setCurrentUser }}>
        <Layout>
            <Header style={{ display: 'flex', alignItems: 'right' }}>
                <div className="demo-logo" >
                    <h1>SR22</h1>
                 </div>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={['2']}
                    items={top_nav_items}
                    onClick={onClick}
                    style={{ flex: 1, minWidth: 0, justifyContent:"flex-end" }}
                />
            </Header>
            <Layout>
                <Sider width={200} style={{ background: colorBgContainer }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{ height: '100%', borderInlineEnd: 0 }}
                        items={side_nav_items}
                        onClick={onClick}
                    />
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Breadcrumb
                        items={[{ title: 'Home' }, { title: location.pathname.substring(1) }]}
                        style={{ margin: '16px 0' }}
                    />
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >

                        <Routes>
                            <Route path="/" element={<Home/>}/>
                            {currentUser && <Route path="/profile" element={<Profile/>}/> }

                        </Routes>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
        </UserContext.Provider>

    );

}


export default App