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

import './index.css';

const App = () => {
  const [visible, setVisible] = useState(false);
  const [placement, setPlacement] = useState('top');

  return (
    <View>
      <Text className="demo-title">basic</Text>
      <View className="demo-content btn-container">
        <Radio.Group
          direction="hoz"
          value={placement}
          dataSource={['top', 'bottom', 'left', 'right', 'center']}
          onChange={(v) => {
            setPlacement(v);
          }}
        />
        <Button
          type="primary"
          style={{ marginTop: '32rpx', marginLeft: '32rpx', marginRight: '32rpx' }}
          onClick={() => setVisible(true)}
        >
          <Text>open</Text>
        </Button>
      </View>

      <Modal
        placement={placement}
        visible={visible}
        maskClosable={true}
        containerClassName={'modal'}
        onClose={(reason) => {
          setVisible(false);
          console.log(`closed by ${reason}`);
        }}
        onMaskClick={() => {
          console.log('mask click');
        }}
        onShow={() => {
          console.log('modal show');
        }}
      >
        <Text>modal content</Text>
      </Modal>
    </View>
  );
};

// render(<App />, null, { driver: DriverUniversal });
 export default App