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

import './index.css';

const InputDemo = () => {
  return (
    <View>
      <Text className="demo-title">normal</Text>
      <View className="demo-content">
        <Input className="my-input" placeholder="please input something" />
        <Input className="my-input" placeholder="please input something" state="loading" />
        <Input className="my-input" placeholder="please input something" state="warning" />
        <Input className="my-input" placeholder="please input something" state="success" />
        <Input className="my-input" placeholder="please input something" state="error" />
        <Input className="my-input" placeholder="please input something" keyboardType="password" />
        <Input className="my-input" defaultValue="clear Input" hasClear />
        <Input
          className="my-input"
          placeholder="readOnly placeholder"
          value="readOnly input long long long text long long long text long long long text long long long text"
          readOnly
        />
        <Input
          className="my-input"
          placeholder="disabled placeholder"
          value="disabled input long long long text long long long text long long long text"
          disabled
        />
        <Input className="my-input" placeholder="max length 11" maxLength={11} />
        <Input className="my-input" placeholder="controlled" value="123" controlled />
      </View>

      <Text className="demo-title">inverse</Text>
      <View className="container--inverse demo-content">
        <Input className="my-input" type="inverse" placeholder="please input something" />
        <Input className="my-input" type="inverse" placeholder="please input something" state="loading" />
        <Input className="my-input" type="inverse" placeholder="please input something" state="warning" />
        <Input className="my-input" type="inverse" placeholder="please input something" state="success" />
        <Input className="my-input" type="inverse" placeholder="please input something" state="error" />
        <Input className="my-input" type="inverse" placeholder="please input something" keyboardType="password" />
        <Input className="my-input" type="inverse" defaultValue="clear Input" hasClear />
        <Input className="my-input" type="inverse" placeholder="readOnly placeholder" value="readOnly input" readOnly />
        <Input className="my-input" type="inverse" placeholder="disabled placeholder" value="disabled input" disabled />
        <Input className="my-input" type="inverse" placeholder="max length 11" maxLength={11} />
      </View>
    </View>
  );
};

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