import getColor from "@insite/mobius/utilities/getColor";
import { HasRouter, withRouter } from "@insite/shell/Components/RouterContext";
import { ShellThemeProps } from "@insite/shell/ShellTheme";
import ShellState from "@insite/shell/Store/ShellState";
import { TS } from "@insite/shell/TS";
import * as React from "react";
import { connect } from "react-redux";
import { Link } from "react-router";
import styled from "styled-components";

const mapStateToProps = ({ shellContext: { homePageId, mobileCmsModeActive } }: ShellState) => ({
    homePageId,
    mobileCmsModeActive,
});

type Props = ReturnType<typeof mapStateToProps> & HasRouter;

const MainNavigation = ({
    mobileCmsModeActive,
    router: {
        location: { pathname },
    },
    homePageId,
}: Props) => {
    if (mobileCmsModeActive) {
        return null;
    }

    const url = pathname.toLowerCase();

    const link = (to: string, title: string, toCheck?: string) => {
        const isActive = url.startsWith((toCheck || to).toLowerCase());
        return (
            <NavigationLink to={to} data-active={isActive} data-test-selector={`shellNavigationTab_${title}`}>
                {title}
            </NavigationLink>
        );
    };

    return (
        <NavigationWrapper data-test-selector="shell_navigation">
            {link(`/ContentAdmin/Page/${homePageId}`, TS("Pages"), "/ContentAdmin/Page")}
            {link("/ContentAdmin/SharedContent", TS("Shared Content"))}
            {link("/ContentAdmin/Design/StyleGuide", TS("Style Guide"))}
        </NavigationWrapper>
    );
};

export default connect(mapStateToProps)(withRouter(MainNavigation));

const NavigationWrapper = styled.div`
    height: ${(props: ShellThemeProps) => props.theme.headerHeight};
    width: ${(props: ShellThemeProps) => props.theme.sideBarWidth};
    display: flex;
    padding: 0 36px;
    align-items: flex-end;
    margin-bottom: 16px;
`;

const NavigationLink = styled(Link)`
    margin-right: 16px;
    font-size: 14px;
    border-bottom: 2px solid transparent;

    &[data-active="true"] {
        color: ${getColor("primary.main")};
        border-bottom: 2px solid ${getColor("custom.activeBorder")};
    }
`;
