import React, { FC, useEffect } from 'react';
import axios from 'axios';
import Container from '@material-ui/core/Container';
import { Route, useRouteMatch } from 'react-router-dom';
import { NonAuthRoutes } from 'components/api/routes';
import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
import { SignUpForm } from 'components/AuthUser/SignUpForm/SignUpForm';

const configDjangoCookieName = (): void => {
  axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
  axios.defaults.xsrfCookieName = 'csrftoken';
  axios.defaults.withCredentials = true;
};

export const AuthUser: FC = () => {
  const { path } = useRouteMatch();
  configDjangoCookieName();
  useEffect(() => {
    axios
      .get('api/web/csrf')
      .then((response) => {
        axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
        sessionStorage.setItem('X-CSRFTOKEN', response.data.token);
        sessionStorage.setItem('ROLE', 'admin');
      })
      .catch((error) => error);
  }, []);
  return (
    <Container maxWidth="sm">
      <Route path={`${path}${NonAuthRoutes.signIn}`} component={SignInForm} />
      <Route path={`${path}${NonAuthRoutes.signUp}`} component={SignUpForm} />
    </Container>
  );
};