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

const seasons = [
  [
    {
      label: '2013',
      value: '2013',
    },
    {
      label: '2014',
      value: '2014',
    },
  ],
  [
    {
      label: '春',
      value: '春',
    },
    {
      label: '夏',
      value: '夏',
    },
  ],
];

const province = [
  {
    label: '北京',
    value: '01',
    children: [
      {
        label: '东城区',
        value: '01-1',
      },
      {
        label: '西城区',
        value: '01-2',
      },
      {
        label: '崇文区',
        value: '01-3',
      },
      {
        label: '宣武区',
        value: '01-4',
      },
    ],
  },
  {
    label: '浙江',
    value: '02',
    children: [
      {
        label: '杭州',
        value: '02-1',
        children: [
          {
            label: '西湖区',
            value: '02-1-1',
          },
          {
            label: '上城区',
            value: '02-1-2',
          },
          {
            label: '江干区',
            value: '02-1-3',
          },
          {
            label: '下城区',
            value: '02-1-4',
          },
        ],
      },
      {
        label: '宁波',
        value: '02-2',
        children: [
          {
            label: 'xx区',
            value: '02-2-1',
          },
          {
            label: 'yy区',
            value: '02-2-2',
          },
        ],
      },
      {
        label: '温州',
        value: '02-3',
      },
      {
        label: '嘉兴',
        value: '02-4',
      },
      {
        label: '湖州',
        value: '02-5',
      },
      {
        label: '绍兴',
        value: '02-6',
      },
    ],
  },
];

const PickerDemo = () => {
  const [value, setValue] = useState(['02']);
  const [season, setSeason] = useState([]);

  return (
    <View style={{ marginTop: '32rpx' }}>
      <View style={{ background: '#ffff', padding: '32rpx', alignItems: 'stretch' }}>
        <Picker
          onChange={(v, index) => {
            setValue(v);
            console.log(v, index);
          }}
          cascade
          data={province}
          value={value}
        />
      </View>
      <View
        style={{
          display: 'flex',
          paddingLeft: '32rpx',
          paddingRight: '32rpx',
          marginTop: '32rpx',
          marginBottom: '32rpx',
        }}
      >
        <Button type="primary" onClick={() => setValue(['02', '02-3'])}>
          Change
        </Button>
      </View>
      <View style={{ background: '#ffff', padding: '32rpx', alignItems: 'stretch' }}>
        <Picker data={seasons} value={season} onChange={setSeason} />
      </View>
    </View>
  );
};

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