import { useNavigate, useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import Page from "../../../components/Page";
import {useContext, useEffect, useMemo, useState } from 'react';
import axios from '../../../utils/axios';
import UserAccessForm from './Form';
import { Role, UserAccess } from '../../../@types/user';



export default function UserAccessCreate() {
  const { id } = useParams();
  const [ currentUserAccess, setCurrentUserAccess ] = useState<UserAccess>();
  const [ roles, setRole ] = useState<any>();


  const navigate = useNavigate();

  const isEdit = !!id;

  useEffect(() => {
    if (isEdit) {
      axios.get('/user/access/'+id)
        .then((res) => {
          setCurrentUserAccess(res.data);
        })
        .catch((err) => {
          if (err.response.status === 404) {
            navigate('/404');
          }
        })
    }
    axios.get('/role-list')
      .then((res)=> {
        setRole(res.data)
      })
      .catch((err) => {
        if (err.response.status === 404) {
          navigate('/404');
        }
      })

  }, [id]);


  return (
    <Page title= "User Access">
      <HeaderBreadcrumbs
        sx={{ px: 2 }}
        heading={'User Access'}
        links={[
          {
            name: 'User Access',
            href: '/user-access',
          },
        ]}
      />

      <UserAccessForm isEdit={isEdit} currentUserAccess={currentUserAccess} roles={roles}/>
    </Page>
  );
}