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 PlacementTop = (_: any) => (
  <div
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    {/* marginTop is here for the demostration. Remove it if you use it. */}
    <Dropdown placement="top" style={{ marginTop: '22rem' }}>
      <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>
  </div>
);

export default PlacementTop;