import React, {useMemo} from 'react';
import { useParams} from 'react-router-dom';
import Breadcrumbs from './Breadcrumbs';
import ServiceHeader from './ServiceHeader';
import './header.scss';
import SettingsHeader from "./SettingsHeader";
import {useMediaQuery} from "react-responsive";
import HeaderControls from "./HeaderControls";
import NotificationsBell from "./NotificationsBell";
import Profile from "./Profile";


type HeaderProps = {
    isQaOpen?: boolean
}

const Header = ({isQaOpen}: HeaderProps) => {

    const {application, settings_cat} = useParams();
    const isDesktop = useMediaQuery({query: '(min-width: 992px)'})

    return useMemo(() => {
        return (
            // header left side - header greet - breadcrumb
            <div id={"header"} className={"d-flex flex-column"}>
                {isDesktop &&
                    <div
                        className={"d-flex align-items-center justify-content-between  top-header"}> {/* header - header greet */}
                        <Breadcrumbs isQaOpen={isQaOpen}/>
                        <HeaderControls/>
                        {/* header right side - dd notifications - dd user menu */}
                        <div className="profile d-flex justify-content-between">
                            {/* header right side - dd notifications */}
                            <NotificationsBell/>
                            {/* header right side - dd user menu */}
                            <Profile/>
                        </div>
                    </div>
                }

                {application && <ServiceHeader/>}
                {settings_cat && <SettingsHeader/>}
            </div>
        );
    }, [application, isDesktop, isQaOpen, settings_cat])
};
export default Header;