import React, { useState, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';
import { ajax } from '@/utils';
import './global.scss';
import BasicLayout from '@/layouts/BasicLayout';
import ListRoles from '@/components/listRoles';

function ListRolePage() {
  const [isLoading, setLoading] = useState(false);
  const [roles, setRoles] = useState([]);
  const [permission, setPermission] = useState([]);
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const rolesData = await ajax({
        api: 'getRoleList',
        method: 'get',
      });
      const permissionList = await ajax({
        api: 'getListPermissions',
        method: 'get',
      });
      await setLoading(false);
      if (rolesData.success) {
        await setRoles(rolesData.result);
      }
      if (permissionList.success) {
        await setPermission(permissionList.result);
      }
    } catch (e) {}
  });
  return (
    <BasicLayout>
      <ListRoles roles={roles} permission={permission} />
    </BasicLayout>
  );
}
ReactDOM.render(<ListRolePage />, document.getElementById('ice-container'));