import React from 'react';
import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
import {
  Dropdown,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';

import doc from './doc.mdx?raw';
export default {
  title: 'Digigov UI/navigation/Dropdown',
  description:
    'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
  component: Dropdown,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Dropdown',
};

export const WithControls = {
  render: (args) => {
    return (
      <Dropdown
        align={args.align}
        disabled={args.disabled}
        dense={args.dense}
        placement={args.placement}
        closeBehaviour={args.closeBehaviour}
        float={args.float}
      >
        <DropdownButton
          role="button"
          aria-haspopup="true"
          aria-controls="menu2"
          arrow
        >
          Ενέργειες
        </DropdownButton>
        <DropdownContent role="menu" id="menu2" scrollable={args.scrollable}>
          <NavList layout="vertical">
            <NavListItemAction role="menuitem" href="#">
              Επεξεργασία
            </NavListItemAction>
            <NavListItemAction role="menuitem" href="#">
              Μετακίνηση
            </NavListItemAction>
            <NavListItemAction role="menuitem" href="#">
              Οριστική διαγραφή
            </NavListItemAction>
          </NavList>
        </DropdownContent>
      </Dropdown>
    );
  },
  args: {
    align: 'right',
    placement: 'bottom',
    disabled: false,
    dense: false,
    closeBehaviour: 'clickButton',
    float: false,
    scrollable: false,
  },
  argsTypes: {
    align: {
      control: {
        type: 'select',
      },
      options: ['left', 'right'],
    },
    placement: {
      control: {
        type: 'select',
      },
      options: ['top', 'bottom'],
    },
    disabled: {
      control: {
        type: 'boolean',
      },
    },
    dense: {
      control: {
        type: 'boolean',
      },
    },
    closeBehaviour: {
      control: {
        type: 'select',
      },
      options: ['clickButton', 'clickOutside'],
    },
    float: {
      control: {
        type: 'boolean',
      },
    },
    scrollable: {
      control: {
        type: 'boolean',
      },
    },
  },
};

export { Default } from '@digigov/ui/navigation/Dropdown/__stories__/Default';
export { Secondary } from '@digigov/ui/navigation/Dropdown/__stories__/Secondary';
export { Warning } from '@digigov/ui/navigation/Dropdown/__stories__/Warning';
export { Disabled } from '@digigov/ui/navigation/Dropdown/__stories__/Disabled';
export { VariantLink } from '@digigov/ui/navigation/Dropdown/__stories__/VariantLink';
export { AlignRight } from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
export { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
export { WithIcons } from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
export { ContentPosition } from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
export { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
export { Dense } from '@digigov/ui/navigation/Dropdown/__stories__/Dense';