import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Item from './components/Item';
import fakeData from './fake_data/fakeData';

class App extends Component {
    render() {
        return (
            <Router>
                <div id="wrapper">
                    <Route exact={true} path="/" render={() => (
                        <List />
                    )} />
                </div>
            </Router>
        );
    }
}

class List extends Component {
    constructor() {
        super();
        this.state = {
            items: fakeData.products,
            categories: fakeData.categories,
            currentFilter: fakeData.categories[0]
        };
    }

    getState() {
        const stateObj = Object.assign({}, this.state);
        return stateObj;
    }

    filterItems(itemsObj) {
        const stateObj = this.getState();
        const filter = stateObj.currentFilter;

        if(filter) {
            const filterId = filter.id;

            const filteredItems = itemsObj.filter(thisItem => {
                const category = thisItem.category;
                if(this.stringMatch(category, filterId))
                    return thisItem;
                return false;
            });

            return filteredItems;
        }

        return itemsObj;
    }

    // This will be used for the store search by substituting stringMatch with stringSearch where appropriate
    stringSearch(searchString, thisString) {
        if(thisString.indexOf(searchString) === 0)
            return true;

        return false;
    }

    stringMatch(searchString, thisString) {
        if(thisString === searchString)
            return true;

        return false;
    }

    getItems() {
        const itemsObj = this.getState().items;
        const filteredItems = this.filterItems(itemsObj);

        const renderObj = filteredItems.map((thisItem, thisIndex) => {
            return (
                <Item
                    key={thisIndex}
                    id={thisItem.id}
                    name={thisItem.name}
                    short_description={thisItem.short_description}
                    description={thisItem.description}
                    price={thisItem.price}
                    image={thisItem.image}
                    category={thisItem.category}
                />
            );
        });

        return renderObj;
    }

    render() {
        const itemsObj = this.getItems();
        const filterName = this.state.currentFilter.name;
        const heading = filterName ? filterName : '';

        return (
            <div className="o-item-listing">
                <div className="o-item-listing__title">
                    {heading}
                </div>
                <div className="o-item-listing__content">
                    {itemsObj}
                </div>
            </div>
        );
    }
}

export default App;