import { createElement, render, useState } from 'rax';
import { Dialog, Checkbox, 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 [modes, setModes] = useState(['mask', 'close', 'ok', 'cancel']);

  return (
    <View>
      <Text className="demo-title">Base Dialog</Text>
      <View className="demo-content">
        <View className="demo-item-line">
          <View className="demo-item-name">选择</View>
          <View className="demo-item-content">
            <Checkbox.Group
              direction="hoz"
              dataSource={['mask', 'close', 'ok', 'cancel']}
              value={modes}
              onChange={(v) => setModes(v)}
            />
          </View>
        </View>
        <Button
          onClick={() => {
            setDialog1(true);
          }}
        >
          open dialog
        </Button>
      </View>

      <Dialog
        visible={dialog1}
        title="标题"
        closeMode={modes}
        onClose={(reason) => {
          console.log('closed by ', reason);
          setDialog1(false);
        }}
      >
        <Text>自定义弹窗内容</Text>
      </Dialog>
    </View>
  );
};

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