import React from 'react';
import styled from '@emotion/styled';
import { Flex, Box } from 'reflexbox';

import Page from 'components/Page';
import Sidebar from 'components/Sidebar';
import useExamplePages from 'hooks/useExamplePages';
import CodeBlock from 'components/CodeBlock';
import { H4 } from 'components/Typo';

import 'example-flows/Overview';

const Wrapper = styled(Flex)`
  flex-grow: 1;
`;

const ReactFlowWrapper = styled(Box)`
  flex-grow: 1;

  .react-flow {
    border-bottom: 1px solid ${(p) => p.theme.colors.silverLighten30};
    height: 65vh;
  }
`;

const SourceWrapper = styled(Box)`
  max-width: 1000px;
  margin: 0 auto;
`;

const SourceCodeBlock = ({ absolutePath, internal }) => {
  const splittedPath = absolutePath.split('/');
  const fileName = splittedPath[splittedPath.length - 1];

  return (
    <Box>
      <Box>{fileName}</Box>
      <CodeBlock code={internal.content} />
    </Box>
  );
};

export default ({ children, title, slug, sourceCodeFiles = [] }) => {
  const menu = useExamplePages();

  const metaTags = {
    title: `React Flow - ${title} Example`,
    siteUrl: `https://reactflow.dev/examples/${slug}`,
    robots: 'index, follow',
  };

  const hasSource = sourceCodeFiles.length > 0;

  return (
    <Page metaTags={metaTags} footerBorder>
      <Wrapper>
        <Sidebar menu={menu} />
        <ReactFlowWrapper>
          {children}
          {hasSource && (
            <SourceWrapper p={3}>
              <H4 as="div">{title} Source Code</H4>
              {sourceCodeFiles.map((source) => (
                <SourceCodeBlock key={source.absolutePath} {...source} />
              ))}
            </SourceWrapper>
          )}
        </ReactFlowWrapper>
      </Wrapper>
    </Page>
  );
};