import Box from '../../box';
import Button from '../../button';
import ConfigProvider from '../../config-provider';
import Dialog from '..';
import React from 'react';
import ReactDOM from 'react-dom';

const popupAlert = () => {
  Dialog.alert({
    title: 'Alert',
    content: 'alert content alert content...',
    okProps: { children: 'Custom OK' },
    cancelProps: { children: 'Custom cancel' },
    onOk: () => console.log('alert ok'),
  });
};

const popupConfirm = () => {
  Dialog.confirm({
    title: 'Confirm',
    content: 'confirm content confirm content...',
    locale: {
      ok: '这是确定',
      cancel: '这是取消',
    },
    onOk: () => console.log('confirm ok'),
    onCancel: () => console.log('confirm cancel'),
  });
};

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

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

ReactDOM.render(
  <ConfigProvider locale={{ Dialog: { ok: 'OK', cancel: 'Cancel' } }}>
    <Box direction="row" spacing={20}>
      <Button onClick={popupAlert}>Alert</Button>
      <Button onClick={popupConfirm}>Confirm</Button>
      <Button onClick={popupShow}>Show</Button>
      <Button onClick={popupCustomIcon}>Custom Icon</Button>
    </Box>
  </ConfigProvider>,
  document.getElementById('dialog-demo-2'),
);