/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';
import { Context, useInitContext } from '../context';
// import cn from 'classnames';

import { AppWrapper } from '../App-Wrapper';
import { PageContainer } from '../Page-Container';
import { PageWrapper } from '../Page-Wrapper';
import { SquareUiContainerProps } from './types.d';

/**
 * Using for wrap whole application
 */

export const SquareUiContainer: FunctionComponent<SquareUiContainerProps> = ({
  breadcrumbs,
  children,
  className = '',
  isContentLoading = false,
  loadingBackdropBlur,
  minimized = false,
  navbarComponent,
  sidebarComponent,
}): React.ReactElement => {
  const contextValue = useInitContext();

  return (
    <AppWrapper className={className}>
      <Context.Provider value={contextValue}>
        {navbarComponent}
        <PageWrapper>
          {sidebarComponent}
          <PageContainer
            loading={{ isLoading: isContentLoading, backdropBlur: loadingBackdropBlur }}
            breadcrumbs={breadcrumbs}
            minimized={minimized}
          >
            {children}
          </PageContainer>
        </PageWrapper>
      </Context.Provider>
    </AppWrapper>
  );
};
