import React from "react";
import { Menu, Flex, SegmentedControl } from "@mantine/core";
import { CgChevronDown } from "react-icons/cg";
import { ViewMode } from "src/enums/viewMode.enum";
import useConfig from "src/store/useConfig";
import * as Styles from "./styles";

export const ViewModeMenu = () => {
  const viewMode = useConfig(state => state.viewMode);
  const setViewMode = useConfig(state => state.setViewMode);

  return (
    <Menu trigger="click" shadow="md" withArrow>
      <Menu.Target>
        <Styles.StyledToolElement title="View Mode">
          <Flex align="center" gap={3}>
            View Mode <CgChevronDown />
          </Flex>
        </Styles.StyledToolElement>
      </Menu.Target>
      <Menu.Dropdown>
        <SegmentedControl
          value={viewMode}
          onChange={e => setViewMode(e as ViewMode)}
          data={[
            { value: ViewMode.Graph, label: "Graph" },
            { value: ViewMode.Tree, label: "Tree" },
          ]}
        />
      </Menu.Dropdown>
    </Menu>
  );
};