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

import './index.css';

const DrawerDemo = () => {
  const [visible, setVisible] = useState(false);
  const [placement, setPlacement] = useState('bottom');
  const [showTitle, setShowTitle] = useState(false);
  const [closeMode, setCloseMode] = useState(['mask']);

  const open = (p) => {
    setPlacement(p);
    setVisible(true);
  };

  const close = () => {
    setVisible(false);
  };

  const sizeProps = {};

  if (['top', 'bottom'].indexOf(placement) !== -1) {
    sizeProps.height = '600rpx';
  } else {
    sizeProps.width = '400rpx';
  }

  return (
    <View>
      <Text className="demo-title">Direction</Text>
      <View className="demo-content btn-container">
        <View className="demo-item-line">
          <View className="demo-item-name">Title</View>
          <View className="demo-item-content">
            <Radio.Group
              direction="hoz"
              value={showTitle}
              dataSource={[
                {
                  label: 'yes',
                  value: true,
                },
                {
                  label: 'no',
                  value: false,
                },
              ]}
              onChange={(v) => {
                setShowTitle(v);
              }}
            />
          </View>
        </View>

        <View className="demo-item-line">
          <View className="demo-item-name">close</View>
          <View className="demo-item-content">
            <Checkbox.Group
              direction="hoz"
              value={closeMode}
              dataSource={['close', 'mask']}
              onChange={(v) => {
                setCloseMode(v);
              }}
            />
          </View>
        </View>
        <Button type="primary" className="btn" onClick={() => open('left')}>
          Open Left Drawer
        </Button>
        <Button type="primary" className="btn" onClick={() => open('right')}>
          Open Right Drawer
        </Button>
        <Button type="primary" className="btn" onClick={() => open('top')}>
          Open Top Drawer
        </Button>
        <Button type="primary" className="btn" onClick={() => open('bottom')}>
          Open Bottom Drawer
        </Button>
      </View>

      <Drawer
        title={showTitle ? 'Title' : ''}
        closeMode={closeMode}
        placement={placement}
        {...sizeProps}
        visible={visible}
        containerClassName="drawer-container"
        onClose={(reason) => {
          console.log('closed by ', reason);
          close();
        }}
        onVisibleChange={(visible) => {
          console.log('visible change', visible);
        }}
        onMaskClick={() => {
          console.log('mask click');
        }}
      >
        <View className="drawer-content" />
      </Drawer>
    </View>
  );
};
// render(<DrawerDemo />, null, { driver: DU });
 export default DrawerDemo