import React, {useState, useEffect, lazy} from "react";
import { Link } from 'react-router-dom';
import { Roles } from 'meteor/roles';
import { PanellSeccions } from "./PanellSeccions/PanellSeccions";

const SeccióPobles = lazy(async () => {
    const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
    return ({ default: module.SeccióPobles });
});
const SeccióNecessitats = lazy(async () => {
    const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
    return ({ default: module.SeccióNecessitats });
});
const SeccióTipus = lazy(async () => {
    const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
    return ({ default: module.SeccióTipus });
});
const SeccióUsuaris = lazy(async () => {
    const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
    return ({ default: module.SeccióUsuaris });
});
const SeccióCodis = lazy(async () => {
    const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
    return ({ default: module.SeccióCodis });
});

const BarraNav = ({esAdministrador, setEsAdministrador}) => {
    const userId = Meteor.userId();
    //  const [esAdministrador, setEsAdministrador] = useState(false);


    //  useEffect(() => {
    //       (async () => {
    //           const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
    //           setEsAdministrador(comprovaAdmin);
    //       })();
    //   }, [esAdministrador]);

      
      return <PanellSeccions >
          { esAdministrador && <SeccióUsuaris />}
          <SeccióPobles />
          <SeccióNecessitats />
          <SeccióTipus />
          { esAdministrador && <SeccióCodis />}
     </PanellSeccions>;
};

export { BarraNav };