import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { transparentize } from 'polished';
import styled, { useTheme } from '@darajs/styled-components';
import { Button } from '@darajs/ui-components';
import DaraDark from '../assets/dara-dark.svg';
import DaraLight from '../assets/dara-light.svg';
import { DirectionCtx, DynamicComponent, Wrapper, getIcon } from '../shared';
import {} from '../types';
import { prependBaseUrl } from '../utils';
const shouldForwardProp = (prop) => !['width'].includes(prop);
const TopBar = styled.div.withConfig({ shouldForwardProp }) `
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;

    width: 100%;
    height: ${(props) => props.height || '124px'};
    min-height: 100px;
    max-height: 350px;
    padding: 2rem 3rem;

    color: ${(props) => props.theme.colors.secondary};

    background: ${(props) => {
    return `
        radial-gradient(farthest-side at 50% 0%, ${transparentize(0.7, props.theme.colors.background)} 0%, ${transparentize(0.9, props.theme.colors.blue4)} 50%),
        radial-gradient(at -50% 90%, ${transparentize(0.5, props.theme.colors.error)} 0%, ${transparentize(0.7, props.theme.colors.blue4)} 45%),
        radial-gradient(at 130% 100%, ${transparentize(0.4, props.theme.colors.success)} 0%, ${transparentize(0.5, props.theme.colors.blue4)} 50%)`;
}};
    box-shadow:
        rgb(20 20 25 / 15%) 0 4px 16px,
        rgb(20 20 25 / 15%) 0 8px 32px;
`;
const TopBarContent = styled.div `
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
`;
const LogoutButton = styled(Button) `
    width: 7rem;
    height: 3rem;
    margin-left: 0.5rem;
    padding: 1rem;

    border-radius: 1rem;

    a {
        color: ${(props) => props.theme.colors.blue1};
        text-decoration: none;
    }

    svg {
        cursor: pointer;
        margin-right: 1rem;
        color: ${(props) => props.theme.colors.blue1};
    }
`;
const RouteButtons = styled(Wrapper) `
    gap: 0.5rem;
    align-items: center;
`;
const BuiltWithSpan = styled.span `
    display: flex;
    gap: 0.2rem;
    align-items: center;
    font-size: 0.75rem;
`;
const LogoImage = styled.img `
    width: ${(props) => props.width};
    max-width: 200px;
    margin: 0 3rem 0 0;
`;
const LogoutArrow = getIcon('fa-solid fa-arrow-right-from-bracket');
/**
 * The TopBarFrame component is designed as a root component for an app built using the Dara core framework.
 */
function TopBarFrame(props) {
    const theme = useTheme();
    const logo = props.logo_path && (_jsx(LogoImage, { alt: "Logo", src: prependBaseUrl(props.logo_path), width: props.logo_width }));
    const logoSrc = theme.themeType === 'dark' ? DaraDark : DaraLight;
    const daraLogo = _jsx("img", { alt: "Dara", src: logoSrc });
    return (_jsxs(Wrapper, { backgroundColor: theme.colors.background, direction: "column", children: [_jsxs(TopBar, { height: props.top_bar_height, style: { padding: props.top_bar_padding }, children: [_jsxs(TopBarContent, { children: [!props.hide_logo && logo, props.top_bar && (_jsx(RouteButtons, { direction: "row", children: _jsx(DirectionCtx.Provider, { value: { direction: 'row' }, children: props.top_bar && _jsx(DynamicComponent, { component: props.top_bar }) }) })), _jsxs(LogoutButton, { href: "/logout", styling: "error", children: [_jsx(LogoutArrow, { style: { marginRight: '0.5rem' } }), "Logout"] })] }), _jsxs(BuiltWithSpan, { children: ["Built with ", daraLogo] })] }), _jsx(Wrapper, { style: { padding: '2rem 3rem' }, children: props.content && _jsx(DynamicComponent, { component: props.content }) })] }));
}
export default TopBarFrame;
//# sourceMappingURL=top-bar-frame.js.map