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

import './index.css';

const DialogDemo = () => {
  const [dialog1, setDialog1] = useState(false);
  const [dialog2, setDialog2] = useState(false);
  const [dialog3, setDialog3] = useState(false);
  const [dialog4, setDialog4] = useState(false);
  return (
    <View>
      <Text className="demo-title">Base Dialog</Text>
      <View className="demo-content row">
        <Button type="primary" block onClick={() => setDialog1(true)}>
          Normal
        </Button>
        <Button type="primary" block onClick={() => setDialog3(true)}>
          Confirm
        </Button>
        <Button type="primary" block onClick={() => setDialog2(true)}>
          Alert
        </Button>
      </View>
      <Text className="demo-title">No Title</Text>
      <View className="demo-content row">
        <Button type="primary" block onClick={() => setDialog4(true)}>
          no Title
        </Button>
      </View>

      <Dialog visible={dialog1} title="标题" onClose={() => setDialog1(false)}>
        <Text>自定义弹窗内容</Text>
        <Button
          type="primary"
          model="outline"
          className="btn"
          onClick={() =>
            Dialog.alert({
              title: 'alert',
              content: 'alert content',
            })
          }
        >
          再显示一个弹窗
        </Button>
      </Dialog>
      <Dialog visible={dialog2} title="已移除" content="移除成功" type="alert" onClose={() => setDialog2(false)} />
      <Dialog
        visible={dialog3}
        title="请确认"
        content="是否要移除此项目"
        type="confirm"
        onClose={() => setDialog3(false)}
      />
      <Dialog visible={dialog4} content="无标题" onClose={() => setDialog4(false)} />
    </View>
  );
};

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