// require modules (CommonJS)

const sand = require('sand-ui');
const Button = sand.Button;

// import modules (ES6)
import { Button } from 'sand-ui';

import React from 'react';
import ReactDOM from 'react-dom';
import { UIProvider } from 'sand-ui';
import App from './App';

ReactDOM.render(
  <UIProvider theme={{primary: '#AAA'}}>
    <App />
  </UIProvider>,
  document.getElementById('root')
);

import React from 'react';
import { Button } from 'sand-ui';

class ButtonExample extends React.Component {

//...

  render() {
    return (
      <Button onClick={() => console.log('Click!')}>Click me!</Button>
    )
  }
}

import React from 'react';
import { Checkbox } from 'sand-ui';

class CheckboxExample extends React.Component {

//...

  render() {
    return (
      <form>
        <Checkbox checked name="Eggs" />
        <Checkbox name="Chicken" />
        <Checkbox name="Tomatoes" />
        <Checkbox checked name="Milk" />
        <Checkbox checked name="Checkout to-do list" />
      </form>
    )
  }
}

import React from 'react';
import { Dropdown } from 'sand-ui';

class DropdownExample extends React.Component {
  constructor() {
    super();

    this.list = [
      'Twitter',
      'LinkedIn',
      (<br />),
      {
        name: 'GitHub',
        link: 'https://github.com/MedanoSoft',
        props: {
          onClick: () => console.log('GitHub here it goes!')
        }
      }
    ]
  }
//...

  render() {
    return (
        <Dropdown label="Social Media" list={this.list} />
    )
  }
}

import React from 'react';
import { Icon } from 'sand-ui';

class IconExample extends React.Component {

//...

  render() {
    return (
      <div style={{ height: 200 }}>
        <Icon name="bug" color="#00A86B" />
      </div>
    )
  }
}

import React from 'react';
import { Navbar } from 'sand-ui';

class NavbarExample extends React.Component {
  constructor(props) {
    super(props);

    //...
    this.handleSearchbar = this.handleSearchbar.bind(this);
  }

//...
  handleSearchbar(val) {
    console.log(`You are looking for ${val}`);
  }
  
  render() {
    return (
        <Navbar
          title="SandUI"
          right={(<span>&hearts;</span>)}
          searchbar
          onSearch={this.handleSearchbar} />
    )
  }
}

import React, { Component } from 'react';
import { Pagination } from 'sand-ui';

class PaginationExample extends Component {
  render() {
    return (
      <Pagination pages={30} onPagination={(index) => console.log(`Switch to page ${index}`)} />
    )
  }
}

import React, { Component } from 'react';
import { Progress } from 'sand-ui';

class ProgressExample extends Component {
  render() {
    return (
      <Progress type="info" percent={15} />
    )
  }
}

import React from 'react';
import { Radio } from 'sand-ui';

class RadioExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animal: 'cat'
    };
    // ...
    this.handleRadio = this.handleRadio.bind(this);
  }

//...
  handleRadio(value) {
    this.setState({
      animal: value
    });
  }
  
  render() {
    return (
        <form>
          <Radio name="animals" value="cat" checked={this.state.animal === 'cat'} onChange={this.handleRadio}>Cat</Radio>
          <Radio name="animals" value="dog" checked={this.state.animal === 'dog'} onChange={this.handleRadio}>Dog</Radio>
          <Radio value="dragon" name="animals" disabled>Dragon</Radio>
        </form>
    )
  }
}

import React from 'react';
import { Slider } from 'sand-ui';

class SliderExample extends React.Component {

  render() {
    return (
      <Slider step={4} />
    );
  }

}

import React from 'react';
import { Switch } from 'sand-ui';

class SwitchExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      status: true
    };
    // ...
    this.handleSwitch = this.handleSwitch.bind(this);
  }

//...
  handleSwitch(value) {
    this.setState({
      status: value
    });
  }
  
  render() {
    const { status } = this.state;
    return (
        <form>
          <Switch type="box" status={status} onChange={this.handleSwitch} />
        </form>
    )
  }
}

import React from 'react';
import { Tags } from 'sand-ui';

class TagsExample extends React.Component {

  render() {
    return (
      <Tags values={['One', 'Two']} onUpdate={(values) => console.log(values)} />
    );
  }

}

import React from 'react';
import { TextInput } from 'sand-ui';

class InputExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
  	this.setState({
  		value: event.target.value
  	});
  }

//...

  render() {
    const { value } = this.state;
    return (
      <TextInput placeholder="Jane Doe" type="text" value={value} onChange={this.handleChange} />
    );
  }
}

import React from 'react';
import { Container, Box } from 'sand-ui';

class InputExample extends React.Component {
  render() {
    return (
      <Container fluid mdAlign={"middle"} reverse>
        <Box xs={4} md={6} style={{backgroundColor: 'red' }}>
          <p>Hi</p>
        </Box>
        <Box xs={2} md={4} style={{backgroundColor: 'green' }}>
          <p>From a</p>
        </Box>
        <Box style={{backgroundColor: 'blue' }}>
          <p>Box!</p>
        </Box>
      </Container>
    )
  }
}