import { createElement, useState, render } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import { Tab, Icon } from '@alifd/meet';
import './index.css';

const TabDemo = () => {
  const [curActiveKey, setActiveKey] = useState();

  return (
    <View>
      <Text className="demo-title">Scroll</Text>
      <View className="demo-content demo-content--fullwidth">
        <Tab
          defaultActiveKey={3}
          activeKey={curActiveKey}
          fullWidth={false}
          dataSource={[
            { title: 'Tab 1', key: 1 },
            { title: 'Tab 2', key: 2 },
            { title: 'Tab 3', key: 3 },
            { title: 'Tab 4', key: 4 },
            { title: 'Tab 5', key: 5 },
            { title: 'Tab 6', key: 6 },
            { title: 'Tab 7', key: 7 },
            { title: 'Tab 8', key: 8 },
            { title: 'Tab 9', key: 9 },
            { title: 'Tab 10', key: 10 },
            { title: 'Tab 11', key: 11 },
            { title: 'Tab 12', key: 12 },
          ]}
          onChange={(v) => {
            setActiveKey(v);
          }}
        />
      </View>
      <Text className="demo-title">Custom Tool Icon</Text>
      <View className="demo-content demo-content--fullwidth">
        <Tab
          defaultActiveKey={3}
          activeKey={curActiveKey}
          fullWidth={false}
          dataSource={[
            { title: 'Tab 1', icon: 'account', key: 1 },
            { title: 'Tab 2', icon: 'account', key: 2 },
            { title: 'Tab 3', icon: 'account', key: 3 },
            { title: 'Tab 4', icon: 'account', key: 4 },
            { title: 'Tab 5', icon: 'account', key: 5 },
            { title: 'Tab 6', icon: 'account', key: 6 },
            { title: 'Tab 7', icon: 'account', key: 7 },
            { title: 'Tab 8', icon: 'account', key: 8 },
            { title: 'Tab 9', icon: 'account', key: 9 },
            { title: 'Tab 10', icon: 'account', key: 10 },
            { title: 'Tab 11', icon: 'account', key: 11 },
            { title: 'Tab 12', icon: 'account', key: 12 },
          ]}
          renderTool={() => {
            return <Icon name="add" size="s" />;
          }}
          onChange={(v) => {
            setActiveKey(v);
          }}
        />
      </View>

      <Text className="demo-title">no tool</Text>
      <View className="demo-content demo-content--fullwidth">
        <Tab
          defaultActiveKey={3}
          activeKey={curActiveKey}
          fullWidth={false}
          dataSource={[
            { title: 'Tab 1', key: 1 },
            { title: 'Tab 2', key: 2 },
            { title: 'Tab 3', key: 3 },
            { title: 'Tab 4', key: 4 },
            { title: 'Tab 5', key: 5 },
            { title: 'Tab 6', key: 6 },
            { title: 'Tab 7', key: 7 },
            { title: 'Tab 8', key: 8 },
            { title: 'Tab 9', key: 9 },
            { title: 'Tab 10', key: 10 },
            { title: 'Tab 11', key: 11 },
            { title: 'Tab 12', key: 12 },
          ]}
          renderTool={() => {
            return null;
          }}
          onChange={(v) => {
            setActiveKey(v);
          }}
        />
      </View>
    </View>
  );
};

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