import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import { CascaderSelect, Button } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import provinceData from './mock/provinces';
import treeData from './mock/tree';
import './index.css';

const sizes = ['small', 'medium', 'large'];

const CascaderSelectDemo = () => {
  const [provinceVal, setProvinceVal] = useState([]);
  const [treeVal, setTreeVal] = useState([]);

  const handleChange = (v) => {
    setVal(v);
  };

  return (
    <View>
      <Text className="demo-title">less than 3 </Text>
      <CascaderSelect
        placeholder={'please select ...'}
        mode="mini"
        dataSource={provinceData}
        onChange={(v, data, extra) => {
          console.log('province', v, data, extra);
          setProvinceVal(v);
        }}
        value={provinceVal}
      />
      <Text className="demo-title">more than 3</Text>
      <CascaderSelect
        placeholder={'please select ...'}
        dataSource={treeData}
        onChange={(v, data, extra) => {
          console.log('tree', v, data, extra);
          setTreeVal(v);
        }}
        value={treeVal}
      />
      <Text className="demo-title">Disabled && ReadOnly</Text>
      <CascaderSelect placeholder={'please select ...'} dataSource={treeData} value={[]} disabled />
      <CascaderSelect placeholder={'please select ...'} dataSource={treeData} value={[0, 1, 2, 3, 5]} disabled />
      <CascaderSelect placeholder={'please select ...'} dataSource={treeData} value={[0, 1, 2, 3, 5]} readOnly />
    </View>
  );
};

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