/* ResponsiveFrame for desktop and mobile
sliderFrameHook is for slider frame from right or bottom used in side-menu
*/

import { VNode, CssProps, MediaQueryRange, RefProps } from 'lupine.components';
import { MobileFooterMenu } from '../components/mobile-components/mobile-footer-menu';
import { DesktopFooter } from '../components/desktop-footer';
import { DesktopHeader } from '../components/desktop-header';
import { MobileHeaderComponent } from '../components/mobile-components/mobile-header-component';
import { MobileSideMenu } from '../components/mobile-components/mobile-side-menu';
import { IconMenuItemProps } from '../components/mobile-components/icon-menu-item-props';
import { isSafeAreaSupported } from '../lib/support-safe-area';

export interface ResponsiveFrameProps {
  placeholderClassname: string;
  mainContent: VNode<any>;
  desktopHeaderTitle: string;
  desktopFooterTitle?: string;
  desktopTopMenu?: IconMenuItemProps[];
  mobileBottomMenu?: IconMenuItemProps[];
  mobileSideMenuContent: VNode<any>;
  sharedContents: VNode<any>;
  maxWidth?: string;
  autoExtendSidemenu?: boolean;
  onLoad?: () => Promise<void>;
  noSafeAreaTop?: boolean;
}
export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
  const cssContainer: CssProps = {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    height: '100%',
    minHeight: '100%',
    maxWidth: props.maxWidth || '',
    borderRight: props.maxWidth ? '1px solid var(--primary-border-color)' : 'none',
    borderLeft: props.maxWidth ? '1px solid var(--primary-border-color)' : 'none',
    margin: '0 auto',
    overflowX: 'hidden',
    ...(!props.noSafeAreaTop ? {
      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
      'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
    } : {}),
    '.frame-top-menu': {
      display: 'flex',
      flexDirection: 'column',
      width: '100%',
      backgroundColor: 'var(--activatable-bg-color-normal)',
    },
    '.frame-content': {
      display: 'flex',
      flex: '1',
      flexDirection: 'column',
      overflowY: 'auto',
      scrollbarWidth: 'none',
      '&::-webkit-scrollbar': {
        display: 'none',
      },
    },
    '.content-block': {
      display: 'flex',
      flex: '1',
      flexDirection: 'column',
      overflowY: 'auto',
      scrollbarWidth: 'none',
    },
    '.content-block::-webkit-scrollbar': {
      display: 'none',
    },
    '.content-block .padding-block': {
      padding: '0 16px',
    },
    [MediaQueryRange.DesktopAbove]: {
      // for big screens, remove the shadow on the top of mobile header
      '.mobile-header-title-icon-top': {
        boxShadow: 'unset',
      },
    },
    [MediaQueryRange.TabletBelow]: {
      '.frame-footer .d-footer-box, .frame-top-menu .desktop-menu-box': {
        display: 'none',
      },
    },
    [MediaQueryRange.TabletAbove]: {
      transform: 'translateX(0)', // Traps position: fixed children inside this container's dimensions
      '&.auto-extend': {
        '--auto-sidemenu-left-offset': '260px',
        paddingLeft: 'var(--auto-sidemenu-left-offset)',
        boxSizing: 'border-box',
        '.mobile-top-sys-icon': {
          display: 'none',
        },
      },
    },
  };

  const ref: RefProps = {
    onLoad: props.onLoad ? props.onLoad : undefined,
  };
  return (
    <div
      css={cssContainer}
      ref={ref}
      class={['responsive-frame', props.autoExtendSidemenu ? 'auto-extend' : ''].join(' ').trim()}
    >
      {props.sharedContents}
      <div class='frame-top-menu'>
        {props.desktopTopMenu && (
          <DesktopHeader title={props.desktopHeaderTitle} items={props.desktopTopMenu}></DesktopHeader>
        )}
        <MobileHeaderComponent></MobileHeaderComponent>
      </div>
      <div class='frame-content'>
        <MobileSideMenu autoExtend={props.autoExtendSidemenu}>{props.mobileSideMenuContent}</MobileSideMenu>
        <div class={'content-block ' + props.placeholderClassname}>{props.mainContent}</div>
        <div class='frame-footer'>
          {props.desktopFooterTitle && <DesktopFooter title={props.desktopFooterTitle}></DesktopFooter>}
          {props.mobileBottomMenu && <MobileFooterMenu items={props.mobileBottomMenu}></MobileFooterMenu>}
        </div>
      </div>
    </div>
  );
};