import React from 'react';
import ReactDOM from 'react-dom';
import { Dropdown } from 'web-foundation';

const dropdownItems = [
    {
        value: 1,
        title: 'oh beans 1',
        price: 200
    }, {
        value: 2,
        title: 'oh beans 2',
        price: 100
    }, {
        value: 3,
        title: 'oh beans 3',
        price: 50
    }, {
        value: 4,
        title: 'oh beans 4',
        price: 630
    }, {
        value: 5,
        title: 'oh beans 5',
        price: 12
    }
];

class ExampleOptionModel extends Dropdown.DefaultOptionModel {
    constructor(data) {
        super();

        this.extend({
            price: 0
        })
        .fill(data);
    }
}

class ExampleOption extends Dropdown.DefaultOptionView {
    static defaultProps = {
        selected: false,
        model: ExampleOptionModel
    };

    constructor(props) {
        super(props);
    }

    render() {
        let classer = 'option sweet-option-bro';

        if (this.props.selected) {
            classer += ' active';
        }

        return (
            <div className={ classer }
                onClick={ this.onClick.bind(this) }>
                <div className="price">{ this.model.price }</div>
                <div className="title">{ this.model.title }</div>
            </div>
        );
    }
}

const onAdd = {
    title: 'this logs something',
    callback() {
        console.log('dropdown cb called'); // eslint-disable-line
    }
};

export default function() {
    ReactDOM.render(
        <Dropdown.View
            items={ dropdownItems }
            onAdd={ onAdd }/>,
        document.getElementById('dropdown')
    );
    ReactDOM.render(
        <Dropdown.View
            error="some error happend"
            items={ dropdownItems }
            onAdd={ onAdd }/>,
        document.getElementById('dropdown-error')
    );
    ReactDOM.render(
        <Dropdown.View
            items={ dropdownItems }
            template={ ExampleOption }
            onAdd={ onAdd } />,
        document.getElementById('dropdown-custom')
    );
    ReactDOM.render(
        <Dropdown.View />,
        document.getElementById('dropdown-empty')
    );
    ReactDOM.render(
        <Dropdown.View items={ dropdownItems }
            disabled
            template={ ExampleOption } />,
        document.getElementById('dropdown-disabled')
    );
    ReactDOM.render(
        <Dropdown.View items={ dropdownItems }
            disabled
            error
            template={ ExampleOption } />,
        document.getElementById('dropdown-error-disabled')
    );
    ReactDOM.render(
        <Dropdown.View items={ dropdownItems }
            onAdd={ onAdd }
            native />,
        document.getElementById('dropdown-native')
    );
    ReactDOM.render(
        <Dropdown.View items={ dropdownItems }
            error="another error happend"
            native />,
        document.getElementById('dropdown-native-error')
    );
    ReactDOM.render(
        <Dropdown.View items={ dropdownItems }
            error="another error happend"
            disabled
            native />,
        document.getElementById('dropdown-native-error-disabled')
    );
}
