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

export const WithIcons = (_: any) => (
  <ButtonGroup>
    <Dropdown>
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu1"
        arrow
        color="secondary"
      >
        Ενέργειες
      </DropdownButton>
      <DropdownContent role="menu" id="menu1" marginTop={4}>
        <NavList layout="vertical">
          <NavListItemAction role="menuitem" href="#">
            Επεξεργασία
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Μετακίνηση
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Οριστική διαγραφή
          </NavListItemAction>
        </NavList>
      </DropdownContent>
    </Dropdown>
    <DropdownBase>
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu2"
        color="secondary"
      >
        <MoreVertIcon />
      </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>
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu3"
        color="secondary"
      >
        <BurgerIcon />
      </DropdownButton>
      <DropdownContent role="menu" id="menu3" marginTop={4}>
        <NavList layout="vertical">
          <NavListItemAction role="menuitem" href="#">
            Επεξεργασία
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Μετακίνηση
          </NavListItemAction>
          <NavListItemAction role="menuitem" href="#">
            Οριστική διαγραφή
          </NavListItemAction>
        </NavList>
      </DropdownContent>
    </DropdownBase>
    <DropdownBase>
      <DropdownButton
        role="button"
        aria-haspopup="true"
        aria-controls="menu4"
        color="secondary"
      >
        <CaretIcon direction="down" />
      </DropdownButton>
      <DropdownContent role="menu" id="menu4" 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 WithIcons;