import { createElement, render, useState } from 'rax';
import { Transfer, Tag } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

const dataList = [];
for (let i = 0; i <= 8; i++) {
  dataList.push({
    label: `options${i + 1}`,
    value: i,
    disabled: i % 2 === 0,
  });
}
const titles = ['Simple Mode1', 'Simple Mode2'];

const valueData = ['2'];
const TransferDemo = () => {
  const [valueInfo, setValueInfo] = useState(valueData);
  const changeValues = (item) => {
    setValueInfo(['1']);
  };

  const changeInfo = (rightValue, rightList, extra) => {
    console.log(rightValue, rightList, extra);
  };

  const tabChangeInfo = (e, item, index) => {
    console.log(e, item, index);
  };

  return (
    <View>
      <Text className="demo-title">Transfer</Text>
      <Transfer
        dataSource={dataList}
        titles={titles}
        value={valueInfo}
        tabChange={tabChangeInfo}
        defaultLeftChecked={['1']}
        onChange={changeInfo}
      />
    </View>
  );
};

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