/**
 * Created by westprophet on 26.07.2022
 */

import React from 'react';

import cn from 'classnames';
import s from './MainLayout.module.scss';

import MainLayoutContext from './MainLayoutContext';
import useMainLayoutState from './src/hooks/useMainLayoutState';
import { TGridModeType } from './types';

interface IMainLayoutProps {
  className?: string;
  children?: any;
  grid?: TGridModeType;
  appNameKey?: string; // Имя приложения
}

// Лаяут
export default function MainLayout({
  className,
  children,
  appNameKey = 'app-key',
  grid = 'aside-column',
}: IMainLayoutProps) {
  const value = useMainLayoutState(appNameKey, { grid });

  return (
    <MainLayoutContext.Provider value={value}>
      <main
        className={cn(
          s.MainLayout,
          { [s.widthMode]: value.data.isWidthMode },
          { [s.oneColumn]: grid === 'column' },
          className,
        )}
      >
        {children}
      </main>
      {/* <DevStatus /> */}
    </MainLayoutContext.Provider>
  );
}