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

import './index.css';

// delayer
const delayer = (duration) => new Promise((resolve) => setTimeout(resolve, duration));

const SwitchDemo = () => {
  const [asyncChecked, setAsyncChecked] = useState(false);
  const [asyncLoading, setAsyncLoading] = useState(false);

  // on change with params
  const onChange = (checkedValue, e) => {
    // checked value, Event
    console.log(checkedValue, e);
  };

  // on async switch changed
  const onAsyncSwitchChange = async () => {
    if (asyncLoading) return;

    setAsyncLoading(true);
    await delayer(2000);
    setAsyncLoading(false);
    setAsyncChecked(!asyncChecked);
  };

  return (
    <View className="app">
      <View className="section">
        <Text className="section-title">Off</Text>

        <View className="section-content">
          <Switch size="large" onChange={onChange} />
          <Switch size="medium" />
          <Switch size="small" />
        </View>
      </View>

      <View className="section">
        <Text className="section-title">Loading & Off</Text>

        <View className="section-content">
          <Switch size="large" loading />
          <Switch size="medium" loading />
          <Switch size="small" loading />
        </View>
      </View>

      <View className="section">
        <Text className="section-title">Disabled & Off</Text>

        <View className="section-content">
          <Switch size="large" disabled />
          <Switch size="medium" disabled />
          <Switch size="small" disabled />
        </View>
      </View>

      <View className="section">
        <Text className="section-title">On</Text>

        <View className="section-content">
          <Switch size="large" defaultChecked={true} />
          <Switch size="medium" defaultChecked={true} />
          <Switch size="small" defaultChecked={true} />
        </View>
      </View>

      <View className="section">
        <Text className="section-title">Loading & On</Text>

        <View className="section-content">
          <Switch size="large" defaultChecked={true} loading />
          <Switch size="medium" defaultChecked={true} loading />
          <Switch size="small" defaultChecked={true} loading />
        </View>
      </View>

      <View className="section">
        <Text className="section-title">Disabled & On</Text>

        <View className="section-content">
          <Switch size="large" defaultChecked={true} disabled />
          <Switch size="medium" defaultChecked={true} disabled />
          <Switch size="small" defaultChecked={true} disabled />
        </View>
      </View>

      <View className="section">
        <Text className="section-title">Switch Async</Text>

        <View className="section-content">
          <Switch checked={asyncChecked} loading={asyncLoading} onChange={onAsyncSwitchChange} />
        </View>
      </View>
    </View>
  );
};
// render(<SwitchDemo />, null, { driver: DriverUniversal });
 export default SwitchDemo