import React, { useContext, useState } from 'react';
import { Fragment, FC } from 'react';
import { PageProps, Link } from 'docz';
import styled from 'styled-components';

import { Container } from './Container';
import { Sidebar, Topbar } from '../shared';
import { breakpoints } from '../../styles/responsive';
import { useWindowSize } from '../../config';
import { Hamburguer } from '../shared/Sidebar/Hamburguer';
import { mainContext } from '../shared/Main';
import { IconLink } from '../shared/Topbar';

const Wrapper = styled.div`
    flex: 1;

    ${Container} {
        display: flex;
        min-height: 100%;

        ${p =>
            p.theme.mq({
                padding: ['0 10px', '0'],
            })}
    }
`;
const Header = styled.div<any>`
    height: 60px;
    &:not(.fullPage) {
        transform: translateY(-30px);
    }
    text-align: right;
`;
const HLink = styled(Link)<any>`
    &&& {
        line-height: 60px;
        margin: 0 20px;
        color: #101934;
    }
`;
const Document = styled.div`
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    ${p =>
        p.theme.mq({
            padding: ['10px', '30px'],
        })}
`;

export const Page: FC<PageProps> = ({ children, doc, location }) => {
    const { home, fullpage } = doc;
    const { width } = useWindowSize();
    const isAtLeastDesktop = width > breakpoints.tablet;
    const showSidebar = !Boolean(home);
    const { showing, setShowing } = useContext(mainContext);

    const menuParent = home || 'doc';
    const pathname = location && location.pathname;
    return (
        <React.Fragment>
            <Wrapper>
                {!isAtLeastDesktop && <Sidebar menu={menuParent} pathname={pathname} mobile />}
                {fullpage ? (
                    <Fragment>{children}</Fragment>
                ) : (
                    <Container>
                        {!isAtLeastDesktop && (
                            <Hamburguer opened={showing} onClick={() => setShowing((s: any) => !s)} />
                        )}
                        {isAtLeastDesktop && showSidebar && <Sidebar menu={menuParent} pathname={pathname} />}
                        <Document>
                            <Header>
                                <HLink key="1" to="/">
                                    首页
                                </HLink>
                                <HLink key="2" to="/themes">
                                    主题
                                </HLink>
                                <a
                                    style={{ color: '#101934', marginLeft: 20 }}
                                    href="http://git.corp.kuaishou.com/ks-ad/ad-fe/kwai-ui"
                                    target="_blank"
                                >
                                    GitLab
                                </a>
                            </Header>
                            {children}
                        </Document>
                    </Container>
                )}
            </Wrapper>
        </React.Fragment>
    );
};