import PropTypes from 'prop-types';
import React, { Children, Component } from 'react';

import DatalistItem from '../../src/components/datalist-item';
import SelectorDropdown from '../../src/components/selector-dropdown';
import TextInput from '../../src/components/text-input';

const InputContainer = ({ inputProps, ...rest }) => <TextInput {...inputProps} {...rest} />;
InputContainer.propTypes = { inputProps: PropTypes.object };

class SelectorDropdownContainer extends Component {
    static propTypes = {
        initialItems: PropTypes.array.isRequired,
        placeholder: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
    };

    constructor(props) {
        super(props);
        this.state = {
            filterText: '',
            items: props.initialItems,
        };
    }

    handleUserInput = event => {
        this.filterByItem(event.target.value);
    };

    handleItemSelection = i => {
        this.setState({ filterText: this.state.items[i] });
    };

    filterByItem(item) {
        this.setState({ filterText: item });
        this.filterItems(item);
    }

    filterItems(filterText) {
        const { initialItems } = this.props;
        const filterTextLowerCase = filterText.toLowerCase();
        const items = [];

        initialItems.forEach(item => {
            if (item.toLowerCase().indexOf(filterTextLowerCase) !== -1) {
                items.push(item);
            }
        });

        this.setState({ items });
    }

    render() {
        const { placeholder, title } = this.props;
        const { filterText, items } = this.state;
        const dropdownTitle = <div>This is a Title</div>;

        return (
            <div>
                <SelectorDropdown
                    onSelect={this.handleItemSelection}
                    selector={
                        <InputContainer
                            label={title}
                            name="selectorDropdownInput"
                            onInput={this.handleUserInput}
                            placeholder={placeholder}
                            type="text"
                            value={filterText}
                        />
                    }
                >
                    {Children.map(items, item => (
                        <DatalistItem key={item}>{item}</DatalistItem>
                    ))}
                </SelectorDropdown>
                <br />
                <h2>Selector Dropdown with title passed in</h2>
                <SelectorDropdown
                    onSelect={this.handleItemSelection}
                    selector={
                        <InputContainer
                            label={title}
                            name="selectorDropdownInput"
                            onInput={this.handleUserInput}
                            placeholder={placeholder}
                            type="text"
                            value={filterText}
                        />
                    }
                    title={dropdownTitle}
                >
                    {Children.map(items, item => (
                        <DatalistItem key={item}>{item}</DatalistItem>
                    ))}
                </SelectorDropdown>
                <br />
                <h2>Selector Dropdown with dropdown always open</h2>
                <SelectorDropdown
                    isAlwaysOpen
                    onSelect={this.handleItemSelection}
                    selector={
                        <InputContainer
                            label={title}
                            name="selectorDropdownInput"
                            onInput={this.handleUserInput}
                            placeholder={placeholder}
                            type="text"
                            value={filterText}
                        />
                    }
                >
                    {Children.map(items, item => (
                        <DatalistItem key={item}>{item}</DatalistItem>
                    ))}
                </SelectorDropdown>
            </div>
        );
    }
}

const SelectorDropdownExamples = () => (
    <SelectorDropdownContainer
        initialItems={[
            'Illmatic',
            'The Marshall Mathers LP',
            'All Eyez on Me',
            'Ready To Die',
            'Enter the Wu-Tang',
            'The Eminem Show',
            'The Chronic',
            'Straight Outta Compton',
            'Reasonable Doubt',
            'Super long name that should be truncated, we should see the dots at the very end, adding some more text here, should truncate at any moment now, please truncate soon',
        ]}
        placeholder="Select an album"
        title="Album"
    />
);

SelectorDropdownExamples.displayName = 'SelectorDropdownExamples';

export default SelectorDropdownExamples;
