/* eslint-disable react-hooks/rules-of-hooks */
import * as React from 'react';
import { useState } from '@storybook/addons';
import Popover from '.';
import Card from '../Card';
import Button from '../Button';
import Menu from '../Menu';
import { Stack } from '../Layout';
import Icon from '../Icon';
import Modal from '../Modal';

export default {
  title: 'Components|Popover',
  component: Popover,
};

export const index = () => {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <Stack>
      <Popover target={<Button>Toggle</Button>}>
        <Card width="medium">
          <Menu>
            <Menu.Label>Menu label</Menu.Label>
            <Menu.Item onClick={() => setModalOpen(true)}>Open modal</Menu.Item>
            <Menu.Item onClick={() => { }}>Item 2</Menu.Item>
            <Menu.Item onClick={() => { }}>Item 3</Menu.Item>
            <Menu.Item onClick={() => { }}>Item 4</Menu.Item>
            <Menu.Divider />
            <Menu.Label>Other</Menu.Label>
            <Menu.SideLevel label="Sidelevel 1">
              <Card>
                <Menu.Item onClick={() => { }}>Subitem 1-1</Menu.Item>
                <Menu.Item onClick={() => { }}>Subitem 1-2</Menu.Item>
                <Menu.Item onClick={() => { }}>Subitem 1-3</Menu.Item>
                <Menu.Item onClick={() => { }}>Subitem 1-4</Menu.Item>
              </Card>
            </Menu.SideLevel>
          </Menu>
        </Card>
      </Popover>
      <Popover target={<Icon name="pencil" />}>
        <Card width="medium">
          <Menu>
            <Menu.Label>Menu label</Menu.Label>
            <Menu.Item onClick={() => setModalOpen(true)}>Open modal</Menu.Item>
            <Menu.Item onClick={() => { }}>Item 2</Menu.Item>
            <Menu.Item onClick={() => { }}>Item 3</Menu.Item>
            <Menu.Item onClick={() => { }}>Item 4</Menu.Item>
          </Menu>
        </Card>
      </Popover>
      <Modal open={modalOpen} toggle={setModalOpen}>
        <Modal.Body>
          <Popover target={<Button>Toggle</Button>}>
            <Card width="medium">
              <Menu>
                <Menu.Label>Menu label</Menu.Label>
                <Menu.Item onClick={() => { }}>Item 1</Menu.Item>
                <Menu.Item onClick={() => { }}>Item 2</Menu.Item>
                <Menu.Item onClick={() => { }}>Item 3</Menu.Item>
                <Menu.Item onClick={() => { }}>Item 4</Menu.Item>
              </Menu>
            </Card>
          </Popover>
        </Modal.Body>
      </Modal>
    </Stack>
  );
};