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

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

export const 按钮: ComponentStory<typeof OPButton> = (): JSX.Element => {
  const [loading, setLoading] = useState(false);
  const [disabled, setDisabled] = useState(false);

  return (
    <div style={{ position: 'relative' }}>
      <div style={{ marginBottom: '8px' }}>small，点击设置loading</div>
      <div style={{ marginBottom: '12px' }}>
        <OPButton
          hotkey='Esc'
          type='normal'
          size='small'
          loading={loading}
          onClick={() => setLoading(!loading)}
        >
          取消
        </OPButton>
        <OPButton
          hotkey='Esc'
          type='secondary'
          loading={loading}
          size='small'
          onClick={() => setLoading(!loading)}
        >
          取消
        </OPButton>
        <OPButton
          hotkey='Esc'
          type='error'
          size='small'
          loading={loading}
          onClick={() => setLoading(!loading)}
        >
          清空
        </OPButton>
        <OPButton
          hotkey='Esc'
          type='primary'
          size='small'
          loading={loading}
          onClick={() => setLoading(!loading)}
        >
          确认异常
        </OPButton>
        <OPButton
          hotkey='Esc'
          size='small'
          loading={loading}
          onClick={() => setLoading(!loading)}
          balloon={{
            children: '对此按钮功能的解释',
          }}
        >
          悬浮提示
        </OPButton>
      </div>
      <div style={{ marginBottom: '8px' }}>medium，点击设置disabled</div>
      <div>
        <OPButton
          hotkey='Esc'
          type='normal'
          disabled={disabled}
          onClick={() => setDisabled(!disabled)}
        >
          取消
        </OPButton>
        <OPButton
          hotkey='Esc'
          type='secondary'
          disabled={disabled}
          onClick={() => setDisabled(!disabled)}
        >
          取消
        </OPButton>
        <OPButton
          hotkey='Esc'
          type='error'
          disabled={disabled}
          onClick={() => setDisabled(!disabled)}
        >
          清空
        </OPButton>
        <OPButton
          hotkey='Enter'
          type='primary'
          disabled={disabled}
          onClick={() => setDisabled(!disabled)}
        >
          确认异常
        </OPButton>
        <OPButton
          type='link'
          disabled={disabled}
          onClick={() => setDisabled(!disabled)}
        >
          更换
        </OPButton>
        <OPButton
          type='text'
          disabled={disabled}
          onClick={() => setDisabled(!disabled)}
          hotkey='F1'
        >
          扫描商品查看进度
        </OPButton>
      </div>
    </div>
  );
};