import React from 'react';
import styled from 'styled-components';

import type { ResolvedNavItemWithLink, MarkdownConfig } from '@redocly/config';

import { EditPageButton } from '@redocly/theme/components/Buttons/EditPageButton';
import { breakpoints } from '@redocly/theme/core/utils';
import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';

type DocumentationLayoutProps = {
  tableOfContent: React.ReactNode;
  feedback: React.ReactNode;
  config?: MarkdownConfig;
  editPage?: {
    to: string;
  };
  /** String in ISO format */
  lastModified?: string | null;
  nextPage?: ResolvedNavItemWithLink | null;
  prevPage?: ResolvedNavItemWithLink | null;
  className?: string;
};

export function DocumentationLayout({
  tableOfContent,
  feedback,
  config,
  editPage,
  lastModified,
  nextPage,
  prevPage,
  className,
  children,
}: React.PropsWithChildren<DocumentationLayoutProps>): JSX.Element {
  const { editPage: themeEditPage } = config || {};
  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;

  return (
    <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
      <ContentWrapper withToc={!config?.toc?.hide}>
        <Breadcrumbs />
        <LayoutTop>
          {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
          {mergedConf && <EditPageButton to={mergedConf.to} />}
        </LayoutTop>
        {children}
        <LayoutBottom>{feedback}</LayoutBottom>
        <PageNavigation nextPage={nextPage} prevPage={prevPage} />
      </ContentWrapper>
      {tableOfContent}
    </LayoutWrapper>
  );
}

const LayoutWrapper = styled.div.attrs(({ className }) => ({
  className,
}))`
  display: flex;
  flex: 1;
  width: 100%;
`;

const ContentWrapper = styled.section<{ withToc: boolean }>`
  --md-content-font-size: var(--font-size-lg);
  --md-content-line-height: var(--line-height-lg);
  --md-table-font-size: var(--md-content-font-size);
  --md-table-line-height: var(--md-content-line-height);
  --md-tabs-content-font-size: var(--md-content-font-size);
  --md-tabs-content-line-height: var(--md-content-line-height);

  max-width: var(--md-content-max-width);
  width: 90%;
  margin: 0 auto;

  padding: var(--md-content-padding);

  article:first-child > h1:first-child {
    // disable margin top for h1 on the title heading
    margin-top: 0;
  }

  @media screen and (min-width: ${breakpoints.medium}) {
    width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
  }
`;

const LayoutTop = styled.div`
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
`;

const Breadcrumbs = styled(ThemeBreadcrumbs)`
  margin-bottom: var(--breadcrumbs-margin-bottom);
`;

const LayoutBottom = styled(LayoutTop)`
  > * {
    margin: 25px 0;
  }
`;