import React from 'react';
import styled, { css } from 'styled-components';
import { LayoutVariant } from '@redocly/config';

import { breakpoints } from '@redocly/theme/core/utils/media-css';

interface LayoutConfig {
  children: React.ReactNode;
  layout?: LayoutVariant;
  collapsedSidebar?: boolean;
  id?: string;
  className?: string;
}

export function ThreePanelLayout({ children, ...props }: LayoutConfig): JSX.Element {
  return (
    <Wrapper data-component-name="Layout/ThreePanelLayout" {...props}>
      {children}
    </Wrapper>
  );
}

const Wrapper = styled.div<{ collapsedSidebar?: boolean; layout?: LayoutVariant }>`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 100%;

  ${({ layout = LayoutVariant.THREE_PANEL, collapsedSidebar }) => {
    return css`
      max-width: ${layout === LayoutVariant.THREE_PANEL ? '100%' : ''};

      @media screen and (min-width: ${breakpoints.small}) {
        width: ${collapsedSidebar
          ? `var(--layout-${layout}-small-max-width)`
          : 'calc(100% - var(--sidebar-width))'};
        max-width: var(--layout-${layout}-small-max-width);
      }

      @media screen and (min-width: ${breakpoints.medium}) {
        max-width: var(--layout-${layout}-medium-max-width);
      }

      @media screen and (min-width: ${breakpoints.large}) {
        max-width: var(--layout-${layout}-large-max-width);
      }

      @media print {
        width: 100%;
        padding: 0;
      }
    `;
  }};
`;