// @ts-nocheck
import { Cog6ToothIcon, DocumentPlusIcon } from "@heroicons/react/24/solid";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import Button from "../../../components/Button";
import ProBanner from "../../../components/ProBanner/ProBanner";
import SidebarContainer from "../../../components/SidebarContainer";
import { resetBadgeState } from "../../../features/badges/badgesSlice";
import isProActive from "../../../utils/isProActive";
import BadgesTable from "./components/BadgesTable";

const BadgesManager = () => {
  const navigate = useNavigate();
  const isPro = isProActive();
  const dispatch = useDispatch();
  const handleNewBadge = () => {
    dispatch(resetBadgeState());
    navigate("editor");
  };

  return (
    <div>
      <div className="wmx-flex wmx-gap-4 wmx-mb-3">
        <Button onClick={handleNewBadge}>
          <DocumentPlusIcon className="wmx-text-white wmx-size-4" /> New Badge
        </Button>
        <Button
          className="wmx-bg-gray-700 hover:wmx-bg-gray-800"
          onClick={() => {
            navigate("settings");
          }}
        >
          <Cog6ToothIcon className="wmx-text-white wmx-size-4" /> Settings
        </Button>
      </div>
      <div className="wmx-flex wmx-gap-4">
        <div className="wmx-flex-grow">
          <BadgesTable />
        </div>

        {!isPro ? (
          <SidebarContainer>
            <ProBanner />
          </SidebarContainer>
        ) : null}
      </div>
    </div>
  );
};
export default BadgesManager;
