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

import type { JSX } from 'react';
import type { MarkdownConfig } from '@redocly/config';

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

type DocumentationLayoutTopProps = {
  config?: MarkdownConfig;
  editPage?: {
    to: string;
  };
  /** String in ISO format */
  lastModified?: string | null;
};

export function DocumentationLayoutTop({
  config,
  editPage,
  lastModified,
}: React.PropsWithChildren<DocumentationLayoutTopProps>): JSX.Element {
  const { editPage: themeEditPage } = config || {};
  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;

  return (
    <Wrapper data-component-name="Layout/DocumentationLayoutTop">
      <Breadcrumbs />
      <LayoutTop>
        {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
        {mergedConf && <EditPageButton to={mergedConf.to} />}
      </LayoutTop>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
`;

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

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