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

const one = [
    { value: '1', title: 'option 1' },
    { value: '2', title: 'option 2' }
];

const two = [
    { value: '1', title: 'option 1' },
    { value: '2', title: 'option 2' },
    { value: '3', title: 'option 3' }
];

const three = [
    { value: '1', title: 'option 1' },
    { value: '2', title: 'option 2' }
];

const options = [ one, two, three ];

const settings = [
    { placeholder: 'Category 1', items: one },
    { placeholder: 'Category 2', items: two },
    { placeholder: 'Category 3', items: three }
];

function onSelect(idx, option) {
    const _title = option.title,
        _value = option.value;

    if (idx >= settings.length - 1) {
        return;
    }

    const opts = options[idx + 1].map((item) => {
        return {
            title: `${_title}-${item.title}`,
            value: `${_value}-${item.value}`
        };
    });

    if (idx === 0 && _value === one[0].value) {
        opts.push({
            title: 'bonus option',
            value: 'option bonus'
        });
    }

    return opts;
}

export default function() {
    ReactDOM.render(
        <SequencedDropdownsView
            onSelect={ onSelect }
            className="row t50-25-25"
            settings={ settings }/>,
        document.getElementById('flow-dropdown')
    );
}
