import { createElement, render, useState } from 'rax';
import { Dialog, Button } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

const DialogDemo = () => {
  const showDialog = () => {
    Dialog.show({
      title: 'Dialog.show',
      content: '便捷调用 Dialog ',
      onOk: () => {
        console.log('ok');
      },
      onCancel() {
        console.log('Cancel');
      },
      onClose: () => {
        console.log('onClose');
      },
    });
  };
  const showAlertDialog = () => {
    Dialog.alert({
      title: 'alert',
      content: 'alert content',
      onOk() {
        console.log('alert ok');
      },
      onClose() {
        console.log('alert close');
      },
    });
  };
  const showConfirmDialog = () => {
    Dialog.confirm({
      title: 'confirm',
      content: 'confirm content',
      onOk() {
        console.log('confirm  ok');
      },
      onCancel() {
        console.log('confirm cancel');
      },
      onClose() {
        console.log('confirm close');
      },
    });
  };

  const showCloseModeDialog = () => {
    const d = Dialog.show({
      title: 'click Ok to close',
      content: '只有点击 Ok 才能关闭',
      closeMode: [], // 禁止默认关闭逻辑
      onOk: () => {
        d.hide();
      },
    });
  };

  const showCustomCloseDialog = () => {
    const d = Dialog.show({
      title: 'click close icon to close',
      content: '通过 closeMode 参数定制，只有 close Icon 才能关闭',
      closeMode: ['close'],
    });
  };

  return (
    <View>
      <Text className="demo-title">Base Dialog</Text>
      <View className="demo-content ">
        <Button type="primary" model="outline" className="btn" onClick={showDialog}>
          Dialog.show(config)
        </Button>
        <Button type="primary" model="outline" className="btn" onClick={showAlertDialog}>
          Dialog.alert(config)
        </Button>
        <Button type="primary" model="outline" className="btn" onClick={showConfirmDialog}>
          Dialog.confirm(config)
        </Button>
      </View>
      <Text className="demo-title">Feature</Text>
      <View className="demo-content row">
        <Button type="primary" model="outline" onClick={showCloseModeDialog}>
          custom close
        </Button>
        <Button type="primary" model="outline" onClick={showCustomCloseDialog}>
          custom close mode
        </Button>
      </View>
    </View>
  );
};

// render(<DialogDemo />, null, { driver: DU });
 export default DialogDemo