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

import { toggleTag } from '../actions/filters';

class FilterListingContainer extends Component {
    static propTypes = {
        Layout: PropTypes.func.isRequired,        
        tags: PropTypes.arrayOf(PropTypes.shape()).isRequired,        
    }

    clickHandler = (newState, buttonId) => {
        console.log("container " + newState + " " + buttonId);
    }
        
    render = () => {                
        const { Layout, tags } = this.props;        
        return (
          <Layout
            tags={tags}
            onStateChange={this.clickHandler}            
          />
        );
    }
}


const mapStateToProps = state => ({    
    tags: state.tagfilterreducer.tags || [],
});

function mapDispatchToProps(dispatch) {
    return {
        clickHandler: (newState, buttonId) => {                      
            dispatch({
                type: 'TOGGLE_FILTER_TAG',
                data: buttonId,
            })        
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(FilterListingContainer);