import { Colors, Variants } from '../../styles';
import { AppBarLink, StyledAppBar } from './styled-app-bar';
import * as React from 'react';

export interface AppBarLinkContent {
    path: string;
    title: string;
    id?: string;
    type: 'redirect' | 'scroll';
    color?: Colors;
}

interface Props {
    children?: React.ReactNode;
    links?: AppBarLinkContent[];
    color: Colors;
    variant: Variants;
    fixed?: boolean;
}

const AppBar = (props: Props) => {
    const scrollTo = (link: AppBarLinkContent) => {
        if(link.type === 'redirect' || !link.id){
            return;
        }
        
        const element = document.getElementById(link.id);
        if (element) {
            element.scrollIntoView();
        }
    }
    return (
        <StyledAppBar
            color={props.color}
            fixed={props.fixed}
        >
            {props.children}
            {props.links?.map( (link, index) => (
                <AppBarLink
                    key={`appbar-link-${index+1}`}
                    onClick={() => scrollTo(link)}
                    href={link.path}
                >
                    {link.title}
                </AppBarLink>
            ))}
        </StyledAppBar>
    );
};

AppBar.defaultProps = {
    color: 'primary',
    variant: 'contained',
}

export default AppBar;