/* eslint-disable react-hooks/rules-of-hooks */
import { useState } from '@storybook/addons';
import * as React from 'react';
import Card from '../Card/index.jsx';
import Menu from '.';
import Checkbox from '../Checkbox/index';

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

export const index = () => {
  const [sublevel, setSublevel] = useState(null);
  return (
    <Card width="medium" scrollable>
      <Menu
        sublevel={sublevel}
        onSublevelChange={setSublevel}
      >
        <Menu.Item>Item 1</Menu.Item>
        <Menu.Item>Item 2</Menu.Item>
        <Menu.Item>Item 3</Menu.Item>
        <Menu.Item noHover>Item no hover</Menu.Item>
        <Menu.Item disabled>Item disabled</Menu.Item>
        <Menu.Divider />
        <Menu.Sublevel showLevelLabel label="Sublevel 1">
          <Menu.Item onClick={() => setSublevel(null)}>Back</Menu.Item>
          <Menu.Item>Subitem 1-2</Menu.Item>
          <Menu.Item>Subitem 1-3</Menu.Item>
          <Menu.Item>Subitem 1-4</Menu.Item>
        </Menu.Sublevel>
        <Menu.SideLevel label="Sidelevel 1">
          <Card>
            <Menu.Item>Hoveritem 1-1</Menu.Item>
            <Menu.Item>Hoveritem 1-2</Menu.Item>
            <Menu.Item>Hoveritem 1-3</Menu.Item>
            <Menu.Item>
              <Checkbox>Checkbox 1-1</Checkbox>
            </Menu.Item>
            <Menu.Item>
              <Checkbox>Checkbox 1-2</Checkbox>
            </Menu.Item>
          </Card>
        </Menu.SideLevel>
        <Menu.SideLevel label="Sidelevel 2">
          <Card>
            <Menu.Item>Hoveritem 2-1</Menu.Item>
            <Menu.Item>Hoveritem 2-2</Menu.Item>
            <Menu.Item>Hoveritem 2-3</Menu.Item>
            <Menu.Item>
              <Checkbox>Checkbox 2-1</Checkbox>
            </Menu.Item>
            <Menu.Item>
              <Checkbox>Checkbox 2-2</Checkbox>
            </Menu.Item>
          </Card>
        </Menu.SideLevel>
        <Menu.SideLevel label="Sidelevel 3">
          <Card>
            <Menu.Item>Hoveritem 3-1</Menu.Item>
            <Menu.Item>Hoveritem 3-2</Menu.Item>
            <Menu.Item>Hoveritem 3-3</Menu.Item>
            <Menu.Item>
              <Checkbox>Checkbox 3-1</Checkbox>
            </Menu.Item>
            <Menu.Item>
              <Checkbox>Checkbox 3-2</Checkbox>
            </Menu.Item>
          </Card>
        </Menu.SideLevel>
      </Menu>
    </Card>
  );
};