import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Button, Dialog, ConfigProvider } from "../src/index";
const popupAlert = () => {
  Dialog.alert({
    title: 'Alert',
    content: 'alert content alert content.....',
    okProps: { children: 'Custom OK' },
    onOk: () => console.log('ok'),
    closeable: false
  })
}

const popupConfirm = () => {
  Dialog.confirm({
    title: 'Confirm',
    content: 'confirm content confirm content...',
    onOk: () => console.log('ok'),
    onCancel: () => console.log('cancel'),
    closeable: false
  })
}

const popupShow = () => {
  const dialog = Dialog.show({
    title: 'Custom',
    content: 'custom content custom content...',
    footer: (
      <Button warning type="primary" onClick={() => dialog.hide()}>
        Custom button
      </Button>
    ),
    closeable: false
  })
}

const popupCustomIcon = () => {
  Dialog.confirm({
    title: 'Confirm',
    content: 'set icon as "warning" ',
    messageProps: {
      type: 'warning'
    },
    onOk: () => console.log('ok'),
    onCancel: () => console.log('cancel'),
    closeable: false
  })
}


storiesOf("Dialog", module).add("Dialog", () => {
  
  return (
    <div id='app-wrapper'>
      <div id='app'>
        <ConfigProvider locale={{ Dialog: { ok: 'OK', cancel: 'Cancel' } }}>
          <span>
            <Button onClick={popupAlert}>Alert</Button> &nbsp;
            <Button onClick={popupConfirm}>Confirm</Button> &nbsp;
            <Button onClick={popupShow}>Show</Button> &nbsp;
            <Button onClick={popupCustomIcon}>Custom Icon</Button>&nbsp;
          </span>
        </ConfigProvider>
        {/* <Dialog
          title="Welcome to Alibaba.com"
          visible={true}
          // style={{display:'none'}}
          size='medium'
          autoFocus
          // footer={false}
          cancelProps={{ 'aria-label': 'cancel' }}
          okProps={{ 'aria-label': 'ok' }}
        >
          <p >
            {' '}
            Start your business here by searching a popular product
            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product

            Start your business here by searching a popular product


          </p>
        </Dialog> */}
      
      </div>
    </div>
  );
});