import { createElement, render, Component, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import { Range } from '@alifd/meet';

import './index.css';

function Demo() {
  const [single, setSingle] = useState(0.4);
  const [double, setDouble] = useState([25, 87]);

  const marks = {
    '0': '0m',
    '0.2': '0.2m',
    '0.5': '0.5m',
    '1': '1m',
  };

  return (
    <View>
      <Text className="demo-title">Size</Text>
      <View className="demo-content">
        <View className="range__wrap">
          <Range size={'large'} value={single} marks={marks} step={0.1} max={1} onChange={setSingle} />
        </View>
        <View className="range__wrap">
          <Range size={'medium'} value={single} marks={marks} step={0.1} max={1} onChange={setSingle} />
        </View>
        <View className="range__wrap">
          <Range size={'small'} value={single} marks={marks} step={0.1} max={1} onChange={setSingle} />
        </View>
      </View>
      <Text className="demo-title">Mode</Text>
      <View className="demo-content">
        <View className="range__wrap">
          <Range value={single} marks={marks} step={0.1} max={1} onChange={setSingle} />
        </View>
        <View className="range__wrap">
          <Range value={double} max={100} min={0} step={1} onChange={setDouble} mode="double" marks={10} />
        </View>
      </View>
      <Text className="demo-title">marksPosition</Text>
      <View className="demo-content">
        <View className="range__wrap">
          <Range value={double} max={100} min={0} step={1} onChange={setDouble} mode="double" marks={10} />
        </View>
        <View className="range__wrap">
          <Range
            value={double}
            max={100}
            min={0}
            step={1}
            onChange={setDouble}
            mode="double"
            marks={10}
            marksPosition="above"
          />
        </View>
      </View>
      <Text className="demo-title">marks</Text>
      <View className="demo-content">
        <View className="range__wrap">
          <Range value={double} max={100} min={0} step={1} onChange={setDouble} mode="double" marks={10} />
        </View>
        <View className="range__wrap">
          <Range size={'large'} value={single} marks={marks} step={0.1} max={1} onChange={setSingle} />
        </View>
        <View className="range__wrap">
          <Range value={double} max={100} min={0} step={1} onChange={setDouble} mode="double" marks={[25, 50, 75]} />
        </View>
      </View>
      <Text className="demo-title">disabled</Text>
      <View className="demo-content">
        <View className="range__wrap">
          <Range value={single} marks={marks} step={0.1} max={1} onChange={setSingle} disabled />
        </View>
        <View className="range__wrap">
          <Range value={double} max={100} min={0} step={1} onChange={setDouble} mode="double" marks={10} disabled />
        </View>
      </View>
      <Text className="demo-title">tooltip</Text>
      <View className="demo-content">
        <View className="range__wrap">
          <Range value={single} marks={marks} step={0.1} max={1} onChange={setSingle} tooltipVisible />
        </View>
        <View className="range__wrap">
          <Range
            value={double}
            max={100}
            min={0}
            step={1}
            onChange={setDouble}
            mode="double"
            marks={10}
            tooltipVisible={false}
          />
        </View>
      </View>
    </View>
  );
}

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