import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import Head from 'next/head';
import { useRouter } from 'next/router';

import { APPEARANCE_MODE_LIGHT } from '@/mui/constants';

import { loadingSelector } from '../redux/selectors';
import useTitle from '@/modules/@common/helpers/hooks/useTitle';

import ThemeConfig from '@/mui/theme';
import FloatBlock from './FloatBlock/FloatBlock';
import MenuComponent from './menu';

import styles from './index.module.scss';

function LayoutComponent(props) {
  const router = useRouter();
  const loading = useSelector(loadingSelector);
  const [isShowMenu, setShowMenu] = useState(true);

  const title = useTitle();

  useEffect(() => {
    setShowMenu(window.self === window.top);
  }, [router]);

  return (
    <div data-id="Layout" className={styles.Layout}>
      <Head>
        <title>{title}</title>
      </Head>
      {isShowMenu && (
        <ThemeConfig className={styles.Menu} appearance={APPEARANCE_MODE_LIGHT}>
          <MenuComponent key={router.pathname} loading={loading} />
        </ThemeConfig>
      )}
      {props.children}
      <FloatBlock />
    </div>
  );
}

LayoutComponent.propTypes = {
  children: PropTypes.node.isRequired,
};

export default LayoutComponent;
