import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { OPSwitch } from '../../src/index';

export default {
  title: '组件/通用/OPSwitch',
  component: OPSwitch,
} as ComponentMeta<typeof OPSwitch>;

export const 受控开关: ComponentStory<typeof OPSwitch> = (): JSX.Element => {
  const [v1, setV1] = useState(false);
  const [v2, setV2] = useState(false);
  const [v3, setV3] = useState(false);

  return (
    <div>
      <h1>简单-{v1.toString()}</h1>
      <OPSwitch
        value={v1}
        onChange={(v) => {
          setV1(v);
        }}
      />
      <br />
      <h1>带文案-{v2.toString()}</h1>
      <OPSwitch
        text='按单找货'
        value={v2}
        onChange={(v) => {
          setV2(v);
        }}
      />
      <br />
      <h1>快捷键-{v3.toString()}</h1>
      <OPSwitch
        text='多货登记'
        hotKey='F8'
        value={v3}
        onChange={(v) => {
          setV3(v);
        }}
      />
      <br />
      <h1>悬浮提示</h1>
      <OPSwitch
        text='悬浮提示'
        hotKey='F8'
        value={v3}
        onChange={(v) => {
          setV3(v);
        }}
        balloon={{
          children: '功能介绍',
        }}
      />
      <br />
      <h1>只读</h1>
      <OPSwitch text='批量复核' readOnly value />
    </div>
  );
};