import React from "react";
import { ClipLoader } from 'react-spinners';
import { throttle } from 'underscore'
import {connect} from "react-redux";
import { withRouter } from "react-router";
import Header from "../../components/header/header";
import Filter from "../../components/leftSideFilter/leftSideFilter";
import GoodsContainer from "../../components/goodsContainer/goodsContainer";
import SortBar from "../../components/sortBar/sortBar";
import {getFilterSettings, getGoodsByGroup, checkAuthUser, getFilterELements} from "../../actions/actionCreator";
import style from "./parfumPage.module.sass";
const queryString = require('query-string');


class ParfumPage extends React.Component {


    dynamicLoadedContentHandler = () => {
        const rows = (window.pageYOffset + document.documentElement.clientHeight) / 200;
        const blackList = [];


        this.props.lazyLoadGoodsArray.map(elem => {
            blackList.push(elem.id)
        });

        if(rows > this.props.settings.rows) {
            const defaultSettings = Object.assign(
                this.props.settings,
                {rows: rows, blackListIdsGoods: blackList}
            );
            this.props.setFilterSettings(defaultSettings);
            this.props.getGoodsByGroup(this.props.match.params.number, this.props.settings, false);
        }
    };

    componentDidMount() {
        window.addEventListener("scroll", this.dynamicLoadedContentHandler);


        const parsed = queryString.parse(window.location.search, {arrayFormat: 'bracket'});

        const rows = (window.pageYOffset + document.documentElement.clientHeight) / 200;

        const defaultSettings = Object.assign({}, this.props.settings, {rows: rows});

        for(let key in parsed) {
            (key !== 'rows' || key !== "blackListIdsGoods") && ( defaultSettings[key] = parsed[key] );
        }
        this.props.setFilterSettings(defaultSettings);
        this.props.getGoodsByGroup(this.props.match.params.number, defaultSettings);
        this.props.getFiltersData(this.props.match.params.number);
        window.localStorage.getItem("token") && this.props.checkAuthUser();


    }


    componentWillUnmount() {
        window.removeEventListener("scroll", this.dynamicLoadedContentHandler);
    }


    render() {

        return (
                <div className={style.mainContainer}>
                    <div className={style.container}>
                        <Header/>
                    </div>
                    <div className={style.contentContainer}>
                        <div className={style.container}>
                            <Filter/>
                            <div className={style.rightSideContainer}>
                                <SortBar />
                                <GoodsContainer/>
                            </div>
                        </div>
                    </div>
                </div>
        );
    }

}

const mapStateToProps = state => {
    const { goods, isFetching, error, lazyLoadGoodsArray, settings } = state.goodsReducers;

    return {
        goods, settings, isFetching, error, lazyLoadGoodsArray
    }
};

const mapDispatchToProps = (dispatch) => ({
    getGoodsByGroup: (id, query, isFetching) => dispatch(getGoodsByGroup(id, query, isFetching)),
    setFilterSettings: settings => dispatch(getFilterSettings(settings)),
    checkAuthUser: () => dispatch(checkAuthUser()),
    getFiltersData: (groupId) => dispatch(getFilterELements(groupId))
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ParfumPage));