import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { list2Options, getUrlParams } from 'libs/utils';

import moment from 'moment';

import { Select, RangeSelect, Checkbox, Scrollarea, Button } from 'react-trendagent-ui';

import { OBJECT_VIEW, PAYMENTS, DELTA_PRICE } from 'constants/directories';

import { getCheckerboardFiltersValues, getCheckerboardFilters, actionCreators as CheckerboardActions } from 'redux/modules/Checkerboard';
import {  getBlock } from 'redux/modules/Block';

const SelectedFilter = (props) => {
    let value = '';

    switch(props.filter) {
        case 'price':
            if(props.value.from) value += `от ${String(props.value.from).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ')} `;
            if(props.value.to) value += `до ${String(props.value.to).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ')} `;

            value += 'руб.';

            break;
        case 'totalArea':
            value += 'S общ. ';

            if(props.value.from) value += `от ${props.value.from} `;
            if(props.value.to) value += `до ${props.value.to} `;

            value += 'м²';

            break;
        case 'kitchenArea':
            value += 'S кух. ';

            if(props.value.from) value += `от ${props.value.from} `;
            if(props.value.to) value += `до ${props.value.to} `;

            value += 'м²';

            break;
        case 'balconyArea':
            value += 'S бал. ';

            if(props.value.from) value += `от ${props.value.from} `;
            if(props.value.to) value += `до ${props.value.to} `;

            value += 'м²';

            break;
        case 'delta_price':
            if (props.value) {
                const delta = DELTA_PRICE.find(item => String(item.label) === String(props.value));

                if (delta) value = delta.label;
            }

            break;
        default:
            value = props.value;
            break;
    }

    return (
        <div className='checkerboard__filters-selected-item'>
            <div className='checkerboard__filters-selected-item-txt' title={value}>{value}</div>
            <button type='button' className='checkerboard__filters-selected-item-remove' onClick={props.removeFilter} />
        </div>
    )
};

const mapStateToProps = (state, { blockID }) => {
    const filters = getCheckerboardFilters(state, { blockID });

    const deadlinesList = [];

    if (filters.buildings) {
        const deadlines = filters.buildings.map(building => {
            const date = moment(building.deadline).endOf('quarter');
            const { deadline_label, deadline_short } = building;

            if(date.isBefore(moment())) {
                return { deadline_label, deadline_short, timestamp: moment().subtract(1, 'quarters').unix() };
            }

            return { deadline_label, deadline_short, timestamp: date.endOf('quarter').unix() };
        }).filter((val, id, self) => {
            console.log('self', self, id, val);

            return self.indexOf(val.timestamp) === id;
        });

        if (deadlines) {
            deadlines.sort((a, b) => a.timestamp - b.timestamp);

            deadlines.forEach(item => {
                const date = moment.unix(item.timestamp);
                const label = (date.isBefore(moment()) || item.deadline_label !== item.deadline_short) ? 'Сдан' : `до ${date.format('Q кв. YYYY')}`;

                deadlinesList.push({ label, value: date.format('Q.YYYY') });
            });
        }
    }

    return {
        block: getBlock(state, { blockID }),
        filters,
        filtersValues: getCheckerboardFiltersValues(state, { blockID }),
        deadlinesList
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        checkerboardActions: bindActionCreators(CheckerboardActions, dispatch)
    }
};

@connect(mapStateToProps, mapDispatchToProps)
export default class CheckerboardFilters extends Component {
    static contextTypes = {
        router: PropTypes.object.isRequired
    };

    dropdownItemProps = {
        noBorderMark: false
    };

    paperProps = {
        size: 'lsm'
    };

    componentDidMount() {
        if (window.location.search) this.fetchFilters();
        else this.fetchFilteredApartments(this.props.blockID, this.props.filtersValues);
    }

    componentDidUpdate(prevProps) {
        if (JSON.stringify(prevProps.filtersValues) !== JSON.stringify(this.props.filtersValues) || prevProps.blockID !== this.props.blockID) {
            if (this.props.blockID) this.fetchFilteredApartments(this.props.blockID, this.props.filtersValues);
        }
    }

    fetchFilters = () => {
        const { setCheckerboardFiltersValues } = this.props.checkerboardActions;
        const filters = this.getFiltersFromURL();

        if (Object.keys(filters).length === 0) this.fetchFilteredApartments(this.props.blockID, this.props.filtersValues);
        setCheckerboardFiltersValues(this.props.blockID, filters);
    }

    handleChange = (name, value) => {
        const { setCheckerboardFiltersValues } = this.props.checkerboardActions;
        const filters = { ...this.props.filtersValues };

        delete filters[name];
        delete filters.deadline_over_check;

        if (value) filters[name] = value;

        if (filters.deadline && moment(filters.deadline, 'Q.YYYY').endOf('quarter').isBefore(moment().endOf('quarter'))) {
            filters.deadline_over_check = 1;
        }

        setCheckerboardFiltersValues(this.props.blockID, filters);
    };

    handleReset = () => {
        const { setCheckerboardFiltersValues } = this.props.checkerboardActions;

        setCheckerboardFiltersValues(this.props.blockID, {});
    };

    removeFilter = (name, val) => {
        const { setCheckerboardFiltersValues } = this.props.checkerboardActions;
        const filters = { ...this.props.filtersValues };

        if(Array.isArray(filters[name])) {
            filters[name] = filters[name].filter(v => String(v) !== String(val));
        } else {
            delete filters[name];
        }

        setCheckerboardFiltersValues(this.props.blockID, filters);
    };

    /**
     * Получаем объект с параметрами фильтрации из строки запроса
     * @returns {{}}
     */
    getFiltersFromURL = () => {
        const filters = {};
        const query = getUrlParams(this.context.router.history.location.search);

        Object.keys(query).forEach(item => {
            const itemName = item.replace(/^.*_/, '');

            switch(item) {
                case 'deadline':
                    filters[item] = query[item];

                    break;
                case 'price_from':
                case 'price_to':
                    if (!filters.price) {
                        filters.price = {};
                    }

                    filters.price[itemName] = query[item];

                    break;
                case 'totalArea_from':
                case 'totalArea_to':
                    if (!filters.totalArea) {
                        filters.totalArea = {};
                    }

                    filters.totalArea[itemName] = query[item];

                    break;
                case 'kitchenArea_from':
                case 'kitchenArea_to':
                    if (!filters.kitchenArea) {
                        filters.kitchenArea = {};
                    }

                    filters.kitchenArea[itemName] = query[item];

                    break;
                case 'balconyArea_from':
                case 'balconyArea_to':
                    if (!filters.balconyArea) {
                        filters.balconyArea = {};
                    }

                    filters.balconyArea[itemName] = query[item];

                    break;
                case 'room':
                case 'finishing':
                case 'bank':
                case 'wcType':
                case 'building':
                case 'premiseType':
                    if (query[item] !== undefined) {
                        if (!Array.isArray(query[item])) {
                            filters[item] = Array(query[item]);
                        } else {
                            filters[item] = query[item];
                        }
                    }

                    break;
                case 'mortgage':
                case 'installment':
                case 'subsidy':
                case 'voen_mortgage':
                    if (!filters.payment) {
                        filters.payment = [];
                    }

                    filters.payment.push(item);

                    break;
                case 'hide_filtered':
                case 'hide_selled':
                case 'hide_booked':
                case 'reservation':
                    filters[item] = query[item];
                    break;
                case 'delta_price_from':
                    if (!filters.delta_price) filters.delta_price = DELTA_PRICE.find(filter => String(filter.from) === String(query[item])).value;

                    break;
                case 'delta_price_to':
                    if (!filters.delta_price) filters.delta_price = DELTA_PRICE.find(filter => String(filter.to) === String(query[item])).value;

                    break;
                default:
                    break;
            }
        });

        return filters;
    };

    fetchFilteredApartments = (blockID, filters = {}) => {
        const { fetchCheckerboardFilteredApartmentsID } = this.props.checkerboardActions;
        const preparedFilters = {};

        if(typeof filters === 'object') {
            Object.keys(filters).forEach(filter => {
                if(!filters[filter]) return false;
                if(typeof filters[filter] === 'object' && Object.keys(filters[filter]).length === 0) return false;

                switch(filter) {
                    case 'building':
                    case 'hide_filtered':
                    case 'hide_selled':
                    case 'hide_booked':
                        return false;
                    case 'payment': {
                        if (filters.payment.indexOf('mortgage') !== -1) preparedFilters.mortgage = '1';
                        if (filters.payment.indexOf('installment') !== -1) preparedFilters.installment = '1';
                        if (filters.payment.indexOf('subsidy') !== -1) preparedFilters.subsidy = '1';
                        if (filters.payment.indexOf('voen_mortgage') !== -1) preparedFilters.voen_mortgage = '1';

                        break;
                    }
                    case 'reservation': {
                        preparedFilters.reservation = '1';
                        break;
                    }
                    case 'price': {
                        if(filters.price.from) preparedFilters.price_from = filters.price.from;
                        if(filters.price.to) preparedFilters.price_to = filters.price.to;

                        break;
                    }
                    case 'totalArea': {
                        if(filters.totalArea.from) preparedFilters.totalArea_from = filters.totalArea.from;
                        if(filters.totalArea.to) preparedFilters.totalArea_to = filters.totalArea.to;

                        break;
                    }
                    case 'kitchenArea': {
                        if(filters.kitchenArea.from) preparedFilters.kitchenArea_from = filters.kitchenArea.from;
                        if(filters.kitchenArea.to) preparedFilters.kitchenArea_to = filters.kitchenArea.to;

                        break;
                    }
                    case 'balconyArea': {
                        if(filters.balconyArea.from) preparedFilters.balconyArea_from = filters.balconyArea.from;
                        if(filters.balconyArea.to) preparedFilters.balconyArea_to = filters.balconyArea.to;

                        break;
                    }
                    case 'delta_price': {
                        const deltaPrice = DELTA_PRICE.find(item => String(item.value) === String(filters[filter]));

                        if (deltaPrice && deltaPrice.from >= 0) preparedFilters.delta_price_from = deltaPrice.from;
                        if (deltaPrice && deltaPrice.to) preparedFilters.delta_price_to = deltaPrice.to;

                        break;
                    }
                    default:
                        preparedFilters[filter] = filters[filter];
                        break;
                }
            });
        }


        fetchCheckerboardFilteredApartmentsID(blockID, preparedFilters);
    };

    renderTotalAreaValue = ({ from, to }) => {
        return `S общ. ${from ? ` от ${from}` : ''}${to ? ` до ${to}` : ''}  м²`;
    };

    renderKitchenValue = ({ from, to }) => {
        return `S кух. ${from ? ` от ${from}` : ''}${to ? ` до ${to}` : ''}  м²`;
    };

    renderBalconyValue = ({ from, to }) => {
        return `S бал. ${from ? ` от ${from}` : ''}${to ? ` до ${to}` : ''}  м²`;
    };

    renderPriceValue = ({ from, to }) => {
        return `${from ? `от ${from} ` : ''}${to ? `до ${to}` : ''} руб.`;
    }

    renderSelected(lists) {
        return (
            <div className='checkerboard__filters-selected'>
                {Object.keys(this.props.filtersValues).map(filter => {
                    if(typeof this.props.filtersValues[filter] === 'string') {
                        if(!lists[filter] || lists[filter] === undefined) return;

                        const value = lists[filter].find(listItem => String(this.props.filtersValues[filter]) === String(listItem.value));

                        if (!value) return;

                        const handleRemoveFilter = () => {
                            this.removeFilter(filter);
                        };

                        return <SelectedFilter key={filter} {...{ filter, value: value.label, removeFilter: handleRemoveFilter }} />
                    }

                    if (Array.isArray(this.props.filtersValues[filter]) && this.props.filtersValues[filter].length > 0) {
                        if(!lists[filter] || lists[filter] === undefined) return;

                        return this.props.filtersValues[filter].map((val, key) => {
                            const value = lists[filter].find(listItem => String(val) === String(listItem.value));

                            if(!value) return;

                            const handleRemoveFilter = () => {
                                this.removeFilter(filter, val);
                            };

                            return <SelectedFilter key={filter + key} {...{ filter, value: value.label, removeFilter: handleRemoveFilter }} />
                        })
                    }

                    if (typeof this.props.filtersValues[filter] === 'object' && Object.keys(this.props.filtersValues[filter]).length > 0) {
                        if(!this.props.filtersValues[filter].from && !this.props.filtersValues[filter].to) return;

                        const handleRemoveFilter = () => {
                            this.removeFilter(filter);
                        };

                        return <SelectedFilter key={filter} {...{ filter, value: this.props.filtersValues[filter], removeFilter: handleRemoveFilter }} />
                    }
                })}
            </div>
        )
    }

    renderDeltaPriceValue = () => {
        const delta = DELTA_PRICE.find(item => String(item.value) === String(this.props.filtersValues.delta_price));

        if (delta) return delta.label;
        return '';
    }

    render() {
        const lists = {
            building: list2Options(this.props.filters.buildings, 'name', 'id', (val, building) => `Корпус ${val} - Очередь ${building.queue}`),
            deadline: this.props.deadlinesList,
            room: list2Options(this.props.filters.rooms, 'name', 'crm_id'),
            finishing: list2Options(this.props.filters.finishing, 'name', '_id'),
            payment: PAYMENTS,
            bank: list2Options(this.props.filters.banks, 'name', '_id'),
            status: list2Options(this.props.filters.statuses, 'name', 'crm_id'),
            premiseType: OBJECT_VIEW,
            wcType: list2Options(this.props.filters.wc, 'name', 'crm_id'),
            delta_price: list2Options(DELTA_PRICE, 'label', 'value')
        };

        return (
            <div className='checkerboard__filters'>
                <div className='checkerboard__filters-header'>{this.props.block.name}</div>
                <div className='checkerboard__filters-content'>
                    <Scrollarea>
                        <div className='checkerboard__filters-scrollarea'>
                            <div className='checkerboard__filters-rows'>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='delta_price'
                                        fullWidth
                                        circle={false}
                                        emptyText=''
                                        options={DELTA_PRICE}
                                        onChange={this.handleChange}
                                        placeholder='Инвестиционный рост цены'
                                        value={this.props.filtersValues.delta_price}
                                        renderValue={this.renderDeltaPriceValue}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='building'
                                        value={this.props.filtersValues.building}
                                        placeholder='Корпус'
                                        options={lists.building}
                                        onChange={this.handleChange}
                                        multiple
                                        changeAfterClose={false}
                                        fullWidth
                                        circle={false}
                                        dropdownItemProps={this.dropdownItemProps}
                                        paperProps={this.paperProps}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='deadline'
                                        value={this.props.filtersValues.deadline}
                                        placeholder='Срок сдачи'
                                        options={lists.deadline}
                                        onChange={this.handleChange}
                                        fullWidth
                                        circle={false}
                                        emptyText=''
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='room'
                                        value={this.props.filtersValues.room}
                                        placeholder='Количество комнат'
                                        options={lists.room}
                                        onChange={this.handleChange}
                                        multiple
                                        changeAfterClose={false}
                                        fullWidth
                                        circle={false}
                                        dropdownItemProps={this.dropdownItemProps}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <RangeSelect
                                        cleared={false}
                                        name='price'
                                        value={this.props.filtersValues.price}
                                        placeholder='Цена от-до, руб.'
                                        min={500000}
                                        step={500000}
                                        renderValue={this.renderPriceValue}
                                        onChange={this.handleChange}
                                        fullWidth
                                        circle={false}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='finishing'
                                        value={this.props.filtersValues.finishing}
                                        placeholder='Отделка'
                                        options={lists.finishing}
                                        onChange={this.handleChange}
                                        multiple
                                        changeAfterClose={false}
                                        fullWidth
                                        circle={false}
                                        dropdownItemProps={this.dropdownItemProps}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='payment'
                                        value={this.props.filtersValues.payment}
                                        placeholder='Способы оплаты'
                                        options={lists.payment}
                                        onChange={this.handleChange}
                                        multiple
                                        changeAfterClose={false}
                                        fullWidth
                                        circle={false}
                                        dropdownItemProps={this.dropdownItemProps}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='bank'
                                        value={this.props.filtersValues.bank}
                                        placeholder='Банки'
                                        options={lists.bank}
                                        disabled={!lists.bank.length}
                                        onChange={this.handleChange}
                                        multiple
                                        changeAfterClose={false}
                                        fullWidth
                                        circle={false}
                                        dropdownItemProps={this.dropdownItemProps}
                                        paperProps={this.paperProps}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <RangeSelect
                                        cleared={false}
                                        name='totalArea'
                                        value={this.props.filtersValues.totalArea}
                                        placeholder='S общая'
                                        min={25}
                                        step={5}
                                        renderValue={this.renderTotalAreaValue}
                                        onChange={this.handleChange}
                                        fullWidth
                                        circle={false}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <RangeSelect
                                        cleared={false}
                                        name='kitchenArea'
                                        value={this.props.filtersValues.kitchenArea}
                                        placeholder='S кухни'
                                        min={2}
                                        step={2}
                                        renderValue={this.renderKitchenValue}
                                        onChange={this.handleChange}
                                        fullWidth
                                        circle={false}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <RangeSelect
                                        cleared={false}
                                        name='balconyArea'
                                        value={this.props.filtersValues.balconyArea}
                                        placeholder='S балкона'
                                        min={1}
                                        step={1}
                                        renderValue={this.renderBalconyValue}
                                        onChange={this.handleChange}
                                        fullWidth
                                        circle={false}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='wcType'
                                        value={this.props.filtersValues.wcType}
                                        placeholder='Санузел'
                                        options={lists.wcType}
                                        onChange={this.handleChange}
                                        multiple
                                        changeAfterClose={false}
                                        fullWidth
                                        circle={false}
                                        dropdownItemProps={this.dropdownItemProps}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Select
                                        name='premiseType'
                                        multiple
                                        changeAfterClose={false}
                                        value={this.props.filtersValues.premiseType}
                                        placeholder='Тип недвижимости'
                                        options={lists.premiseType}
                                        onChange={this.handleChange}
                                        fullWidth
                                        circle={false}
                                        dropdownItemProps={this.dropdownItemProps}
                                    />
                                </div>
                                <div className='checkerboard__filters-row'>
                                    <Checkbox name='reservation' size='sm' checked={this.props.filtersValues.reservation} label='Показать забронированные' onChange={this.handleChange} />
                                </div>
                                {/* <div className='checkerboard__filters-row'>
                                    <Select name='status' value={this.props.filtersValues.status} placeholder='Статус' options={lists.status} onChange={this.handleChange} multi />
                                </div> */}
                            </div>
                            {this.renderSelected(lists)}
                            <div className='checkerboard__filters-reset'>
                                <Button circle={false} kind='ghost' fullWidth size='md' onClick={this.handleReset}>Сбросить всё</Button>
                            </div>
                        </div>
                    </Scrollarea>
                </div>
            </div>
        )
    }
}