/* eslint-disable react-hooks/exhaustive-deps */
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { PaymentProvider } from '@blocklet/payment-react';
import Dashboard from '@blocklet/ui-react/lib/Dashboard';
import { styled } from '@mui/system';
import { useEffect } from 'react';

import { Typography } from '@mui/material';
import { useSessionContext } from '../../contexts/session';

const Root = styled(Dashboard)<{ padding: string }>`
  width: 100%;
  background-color: ${({ theme }) => theme.palette.background.default};

  > .dashboard-body > .dashboard-main {
    > .dashboard-content {
      padding: ${(props) => props.padding || '0 24px'};
      .MuiTab-root {
        padding: 0;
        margin-right: 24px;
        min-height: 32px;
        min-width: auto;
        font-size: 0.875rem;
      }
      .page-content .MuiTab-root {
        font-size: 0.875rem;
        &.Mui-selected {
          font-size: 1.125rem;
        }
      }

      .MuiTabs-root {
        min-height: 32px;
        margin-bottom: 8px;
      }

      .page-content {
        margin-top: 2px;
      }

      .MuiToggleButton-root {
        padding: 4px 16px;
      }
    }

    > .dashboard-footer {
      margin-top: 0;
      padding: 8px 0;

      .logo-container {
        svg {
          height: 100%;
        }
      }
    }
  }
  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
    > .dashboard-body > .dashboard-main > .dashboard-content {
      padding: ${(props) => props.padding || '0 16px'};
    }
  }
`;

export default function Layout(props: any) {
  const { t } = useLocaleContext();
  const { session, connectApi, events } = useSessionContext();

  useEffect(() => {
    events.once('logout', () => {
      window.location.href = '/';
    });
  }, []);

  useEffect(() => {
    if (session.initialized && !session.user) {
      // @ts-ignore
      session.login(() => {}, { openMode: 'redirect', redirect: window.location.href });
    }
  }, [session.initialized]);

  if (session.user) {
    return (
      <PaymentProvider session={session} connect={connectApi}>
        <Root {...props} footerProps={{ className: 'dashboard-footer' }} />
      </PaymentProvider>
    );
  }

  return <Typography>{t('common.redirecting')}</Typography>;
}
