import React from 'react';
import { ButtonGroup } from '@digigov/ui/form/Button';
import {
  DropdownBase,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';

export const ContentPosition = (_: any) => (
  <ButtonGroup>
    <DropdownBase align="right">
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu2"
        color="secondary"
      >
        Align right
      </DropdownButton>
      <DropdownContent role="menu" id="menu2" marginTop={4}>
        <NavList layout="vertical">
          <NavListItemAction role="menuitem" href="#">
            Επεξεργασία
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Μετακίνηση
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Οριστική διαγραφή
          </NavListItemAction>
        </NavList>
      </DropdownContent>
    </DropdownBase>
    <DropdownBase align="left">
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu2"
        color="secondary"
      >
        Align left
      </DropdownButton>
      <DropdownContent role="menu" id="menu2" marginTop={4}>
        <NavList layout="vertical">
          <NavListItemAction role="menuitem" href="#">
            Επεξεργασία
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Μετακίνηση
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Οριστική διαγραφή
          </NavListItemAction>
        </NavList>
      </DropdownContent>
    </DropdownBase>
    <DropdownBase placement="top">
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu2"
        color="secondary"
      >
        Placement top
      </DropdownButton>
      <DropdownContent role="menu" id="menu2" marginTop={4}>
        <NavList layout="vertical">
          <NavListItemAction role="menuitem" href="#">
            Επεξεργασία
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Μετακίνηση
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Οριστική διαγραφή
          </NavListItemAction>
        </NavList>
      </DropdownContent>
    </DropdownBase>
    <DropdownBase placement="bottom">
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu2"
        color="secondary"
      >
        Placement bottom
      </DropdownButton>
      <DropdownContent role="menu" id="menu2" marginTop={4}>
        <NavList layout="vertical">
          <NavListItemAction role="menuitem" href="#">
            Επεξεργασία
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Μετακίνηση
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Οριστική διαγραφή
          </NavListItemAction>
        </NavList>
      </DropdownContent>
    </DropdownBase>
  </ButtonGroup>
);

export default ContentPosition;