import React from "react";
import * as EdgebrixDropdownMenu from "@radix-ui/react-dropdown-menu";
import { RxChevronRight, RxDotFilled, RxHamburgerMenu } from "react-icons/rx";
import { BsCheck } from "react-icons/bs";
import { NewActionDialog } from "../Actions";
import styles from "./admin.module.css";

const Admin = () => {
  const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
  const [urlsChecked, setUrlsChecked] = React.useState(false);
  const [person, setPerson] = React.useState("pedro");
  const [openNewActionDialog, setOpenNewActionDialog] = React.useState(false);

  return (
    <>
      <NewActionDialog
        open={openNewActionDialog}
        setOpen={setOpenNewActionDialog}
      />

      <EdgebrixDropdownMenu.Root>
        <EdgebrixDropdownMenu.Trigger asChild>
          <button className={styles.IconButton} aria-label="Customise options">
            <RxHamburgerMenu />
          </button>
        </EdgebrixDropdownMenu.Trigger>

        <EdgebrixDropdownMenu.Portal>
          <EdgebrixDropdownMenu.Content
            className={styles.DropdownMenuContent}
            sideOffset={5}
          >
            <EdgebrixDropdownMenu.Item className={styles.DropdownMenuItem}>
              Secrets
            </EdgebrixDropdownMenu.Item>
            <EdgebrixDropdownMenu.Sub>
              <EdgebrixDropdownMenu.SubTrigger
                className={styles.DropdownMenuSubTrigger}
              >
                Actions
                <div className={styles.RightSlot}>
                  <RxChevronRight />
                </div>
              </EdgebrixDropdownMenu.SubTrigger>
              <EdgebrixDropdownMenu.Portal>
                <EdgebrixDropdownMenu.SubContent
                  className={styles.DropdownMenuSubContent}
                  sideOffset={2}
                  alignOffset={-5}
                >
                  <EdgebrixDropdownMenu.Item
                    className={styles.DropdownMenuItem}
                    onClick={() => setOpenNewActionDialog(true)}
                  >
                    Add
                  </EdgebrixDropdownMenu.Item>
                  <EdgebrixDropdownMenu.Item
                    className={styles.DropdownMenuItem}
                  >
                    List
                  </EdgebrixDropdownMenu.Item>
                </EdgebrixDropdownMenu.SubContent>
              </EdgebrixDropdownMenu.Portal>
            </EdgebrixDropdownMenu.Sub>

            {/* <EdgebrixDropdownMenu.Separator className={styles.DropdownMenuSeparator" /> */}

            <EdgebrixDropdownMenu.Arrow className={styles.DropdownMenuArrow} />
          </EdgebrixDropdownMenu.Content>
        </EdgebrixDropdownMenu.Portal>
      </EdgebrixDropdownMenu.Root>
    </>
  );
};

export { Admin };
