import React from 'react';

import { Button } from '@digigov/ui/form/Button';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';

import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
import { TextInput } from '@digigov/ui/form/TextInput';
import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
import {
  Dropdown,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';

export const Dense = (_: any) => (
  <Dropdown dense>
    <DropdownButton
      role="button"
      aria-haspopup="true"
      aria-controls="menu2"
      arrow
    >
      Αναζήτηση
    </DropdownButton>
    <DropdownContent role="menu" id="menu2">
      <FieldContainer role="menuitem">
        <LabelContainer>
          <LabelTitle>Όνομα πεδίου</LabelTitle>
          <TextInput name="input-name" />
        </LabelContainer>
      </FieldContainer>
      <SectionBreak role="separator" paddingBottom={0} paddingTop={0} />
      <NavList layout="vertical">
        <NavListItemAction role="menuitem" href="#">
          Επεξεργασία
        </NavListItemAction>
        <NavListItemAction role="menuitem" href="#">
          Μετακίνηση
        </NavListItemAction>
        <NavListItemAction role="menuitem" href="#">
          Οριστική διαγραφή
        </NavListItemAction>
      </NavList>
      <SectionBreak role="separator" />
      <Button role="menuitem" color="secondary">
        Ενέργεια
      </Button>
    </DropdownContent>
  </Dropdown>
);

export default Dense;