import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useRouter } from 'next/router';

import { REDIRECT_URL_STORAGE_NAME } from '@/modules/@common/storage/constants';

import { getSessionStorageItem } from '@/modules/@common/storage/helpers';
import { logOutEventAction } from '@/modules/@common/token/redux/slices';

import { Stack } from '@/mui/components';

function LogOut() {
  const router = useRouter();
  const dispatch = useDispatch();

  const redirectUrl = router.asPath.split('redirectTo=')[1];

  useEffect(() => {
    dispatch(
      logOutEventAction({
        logOutPage: true,
        logoutFrom: redirectUrl || getSessionStorageItem(REDIRECT_URL_STORAGE_NAME) || '/',
      }),
    );
  }, []);

  return (
    <Stack
      alignItems="center"
      justifyContent="center"
      style={{
        // eslint-disable-next-line local-rules/no-inline-styles
        width: '100vw',
        // eslint-disable-next-line local-rules/no-inline-styles
        height: '100vh',
        background:
          // eslint-disable-next-line local-rules/no-inline-styles
          'linear-gradient(to top left, #723dde, rgb(255 153 150 / 0%), #fdfdfe), linear-gradient(to top right, #3855de, rgb(255 153 150 / 0%), #75fbeb) #6f31e3',
      }}
    />
  );
}

export default LogOut;
