import React from 'react';
import SwOptionsMenu from '@component/sw-options-menu/sw-options-menu'

import clsx from 'clsx'
import {StateOfReminder} from "../../utils/utils";
const menuOpened = [
  'true',
  'false',
]

export default {
  title: 'Library / Sw Options Menu',
  component: SwOptionsMenu,
  parameters: {
    actions: {
      handles: ['click', 'switchMenuIsOpen()'],
    },},
  argTypes: {

    menuOpened: {
      type: { name: 'boolean' },
      control: { type: 'select' },
      options: menuOpened,
    },
  },
}
const Template = args =>
  <div className={clsx('grid gap-6 p-6 bg-adjust-tone transition-colors text-adjust-tone-03')}>
    <div className={'flex flex-col'}>
      <div><sw-options-menu onClick={() => switchMenuIsOpen()} state={args.state} menuOpened={MenuOpened.args.menuOpened}></sw-options-menu></div>
      <div><sw-options-menu onClick={() => switchMenuIsOpen()} state={2} menuOpened={true}></sw-options-menu></div>

    </div>
  </div>

export const MenuOpened = Template.bind({})
MenuOpened.args = {
  menuOpened: false,
  state: 0
}
function triggerOpen(){
  MenuOpened.args.menuOpened = !MenuOpened.args.menuOpened;
  MenuOpened.args.state = 2;
}

function switchMenuIsOpen(){
  MenuOpened.args.menuOpened = !MenuOpened.args.menuOpened;
  MenuOpened.args.state = 2;
}
