import { Routes, Route, NavLink, useNavigate } from 'react-router-dom';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';
import { PATHS as AUTH_PAGE } from 'pages/auth/AuthenticationPage';
import { useUserContext } from 'context/user';

import { useRedirect } from 'hooks/useRedirect';
import { useModal } from 'components/layers';

import { Box, Button } from 'components/common';
import { Header } from 'components/Header';
import { ConfirmationModal } from 'components/modals/ConfirmationModal';
import { withErrorBoundary } from 'components/ErrorBoundary';
import { ProfileScreen } from './account/ProfileScreen';
import { SecurityScreen } from './security/SecurityScreen';
import { BillingScreen } from './billing/BillingScreen';
import { IntegrationSettings } from './integrations/IntegrationSettings';
import { SecretSettings } from './SecretSettings';

const { NODE_ENV } = process.env;

export const PATHS = {
  account: 'account',
  security: 'security',
  billing: 'billing',
  integrations: 'integrations',
};

const ROUTES = [
  {
    path: PATHS.account,
    label: 'Account',
    component: <ProfileScreen />,
  },
  {
    path: PATHS.security,
    label: 'Security',
    component: <SecurityScreen />,
  },
  {
    path: PATHS.billing,
    label: 'Billing',
    component: <BillingScreen />,
  },
  {
    path: PATHS.integrations,
    label: 'Integrations',
    component: <IntegrationSettings />,
  },
];

export const SettingsPage = () => {
  const user = useUserContext();

  const navigate = useNavigate();

  useRedirect(`/${HOMEPAGE.settings}`, PATHS.account);

  const signout = () => {
    user.signOut();
    navigate(`/${AUTH_PAGE.signin}`);
  };

  const confirmationModal = useModal(ConfirmationModal, {
    defaultProps: {
      onAccept: signout,
    },
  });

  return (
    <div className="h100 flex flexColumn oa">
      <Header
        className="sticky"
        style={{ top: 0, zIndex: 1 }}
        title={
          <Box spacing={4}>
            {ROUTES.map((route) => (
              <NavLink className="header-link" to={route.path} key={route.path}>
                {route.label}
              </NavLink>
            ))}
            {NODE_ENV === 'development' && (
              <NavLink className="header-link" to="secret">
                Secret
              </NavLink>
            )}
          </Box>
        }
        right={
          <Button color="blue" onClick={() => confirmationModal.show()}>
            Sign out
          </Button>
        }
      />
      <div
        className="flex flexColumn marginXA paddingX4 paddingY10"
        style={{ width: 600, maxWidth: '100%', paddingBottom: 100 }}
      >
        <Routes>
          {ROUTES.map((route) => (
            <Route
              path={route.path}
              element={withErrorBoundary(route.component)}
              key={route.path}
            />
          ))}
          <Route path="secret" element={<SecretSettings />} />
        </Routes>
      </div>
    </div>
  );
};

export default SettingsPage;