import React from 'react';
import { useContext } from 'react';
import styled, { css } from 'styled-components';
import { Link } from 'docz';

import { Hamburguer } from '../Sidebar/Hamburguer';
import { Container, Logo } from '../../ui';
import { breakpoints } from '../../../styles/responsive';
import { mainContext } from '../Main';
import { useWindowSize } from '../../../config';

const Wrapper = styled.div`
    z-index: 999;
    width: 100%;
    position: fixed;
    height: 60px;
    border-bottom: 1px solid ${p => p.theme.colors.grayLight};
    //background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
    background: #f6f7fb;
    ${Container} {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;

        ${p =>
            p.theme.mq({
                padding: ['0 14px', '0 20px', '0 20px', '0 20px'],
            })};
    }
`;

const LogoLink = styled(Link)<any>`
    margin-left: 12px;
    height: 30px;
`;

const Menu = styled.div`
    display: flex;
`;

const linkStyle = (p: any) => css`
    color: ${p.theme.colors.main};
    opacity: 0.5;
    transition: opacity 0.2s;
    font-size: 15px;
    font-weight: 400;

    &.active,
    &:visited,
    &:hover {
        color: ${p.theme.colors.main};
        opacity: 1;
    }
`;

const MenuLink = styled(Link)<any>`
    ${linkStyle};
    margin: 0 10px;
`;

export const IconLink = styled.a<any>`
    ${linkStyle};
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 20px;

    svg {
        stroke: ${p => p.theme.colors.main};
    }
`;

interface MenuListItem {
    id: number;
    children: React.ReactNode;
    [key: string]: any;
}

export const TOPBAR_LINKS: MenuListItem[] = [
    {
        id: 1,
        children: '首页',
        to: '/',
    },
    {
        id: 2,
        children: '文档',
        to: '/quick-start',
    },
    {
        id: 3,
        children: '主题',
        to: '/themes',
    },
];

export const Topbar = () => {
    const { width } = useWindowSize();
    const showFullMenu = width > breakpoints.tablet;
    const { showing, setShowing } = useContext(mainContext);

    return (
        <Wrapper>
            <Container>
                <LogoLink to="/">
                    <Logo height={30} small={!showFullMenu} />
                </LogoLink>
                <Menu>
                    {showFullMenu &&
                        TOPBAR_LINKS.map(({ id, children, ...props }) => {
                            const Component = props.to ? MenuLink : IconLink;
                            return (
                                <Component key={id} {...props}>
                                    {children}
                                </Component>
                            );
                        })}
                    <IconLink as="a" href="http://git.corp.kuaishou.com/ks-ad/ad-fe/kwai-ui" target="_blank">
                        GitLab
                    </IconLink>

                    {!showFullMenu && <Hamburguer opened={showing} onClick={() => setShowing((s: any) => !s)} />}
                </Menu>
            </Container>
        </Wrapper>
    );
};