import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Switch } from "../src/index";

function onChange(checked) {
  console.log(`switch to ${checked}`)
}

storiesOf("Switch", module).add("Switch", () => {
  return (
    <div id='app-wrapper'>
      <div id='app'>
        <p>Green</p>
      <Switch
      size='large'
        checkedChildren="on"
        onChange={onChange}
        unCheckedChildren="off"
        aria-label="accessible switch"
      />
      <Switch
        checkedChildren="on"
        onChange={onChange}
        unCheckedChildren="off"
      />
      <br />
      <Switch defaultChecked={false} onChange={onChange} size="small" />
      <br />
      <Switch
        className="large-width"
        checkedChildren="on"
        onChange={onChange}
        unCheckedChildren="off please"
      />
      <div>
        <div className="line">
          <Switch
            checked={true}
            disabled
          />
          <Switch
            checked={false}
            disabled
          />
        </div>
      </div>
      <p>blue</p>
      <Switch
        checkedChildren="on"
        onChange={onChange}
        unCheckedChildren="off"
        aria-label="accessible switch"
        theme="blue"
      />
      <Switch
        checkedChildren="on"
        onChange={onChange}
        unCheckedChildren="off"
        theme="blue"
      />
      <br />
      <Switch defaultChecked={false} onChange={onChange} size="small" theme="blue"/>
      <br />
      <Switch
        className="large-width"
        checkedChildren="on"
        onChange={onChange}
        unCheckedChildren="off please"
        theme="blue"
      />
      <div>
        <div className="line">
          <Switch
            checked={true}
            disabled
            theme="blue"
          />
          <Switch
            checked={false}
            disabled
            theme="blue"
          />
        </div>
      </div>
      </div>
    </div>
  );
});