import React, { PureComponent, Fragment } from 'react'
import Select from 'react-select';
import PropTypes from 'prop-types';
import Button from '../../../components/Layout/Button';
import { countries, selectStyles, bisChannels, eventsDummy, riskCategoriesDummy, betTypesDummy, transformDataForSelect } from './betScrollerUtils';

class BetScrollerFilter extends PureComponent {
    state = {
        selectEntities: {
            businessUnits: [],
            businessChannels: [],
            events: [],
            sports: [],
            riskCategories: [],
            betTypes: []
        }
    }

    componentDidMount() {
        this.mapSelectValues();
    }

    componentDidUpdate(prevProps) {
        if (prevProps.selectedBetScroller !== this.props.selectedBetScroller) {
            this.mapSelectValues()
        }
    }

    mapSelectValues = () => {
        const { betScroller } = this.props;
        const nonSelecValues = ['id', 'name', 'betStakeMax', 'betStakeMin', 'takeoutMin', 'createdUserId', 'changedUserId'];
        const betScrollerCopy = Object.keys(betScroller).reduce((object, key) => {
            if (!nonSelecValues.includes(key)) {
                object[key] = transformDataForSelect(betScroller[key], key);
            }
            return object;
        }, {});

        this.setState({ selectEntities: betScrollerCopy });
    }

    deleteBetScroller = () => {
        this.props.deleteBetScroller(this.props.betScroller.id);
        this.resetSelectFields();
        this.props.setBetScrollerFilterObj(this.props.myBetScrollersSize())
    }

    handleInputChange = (event) => {
        const { value, name } = event.target;
        this.props.updateFilter(value, name);
    }

    bsNameExist = (betScrollers) => {
        const bsArr = betScrollers.map(bs => bs.name);
        const isDuplicate = bsArr.some((item, idx) => bsArr.indexOf(item) !== idx);
        return isDuplicate;
    }

    createBetScrollerHandler = (e) => {
        e.preventDefault();
        const { createBetScroller, updateBScroller, betScroller, betScrollers, addNotificationMessage } = this.props;
        let { name, betStakeMin, betStakeMax, takeoutMin } = {
          ...betScroller,
          betStakeMin: betScroller.betStakeMin
            ? Number(betScroller.betStakeMin) * 100
            : null,
          betStakeMax: betScroller.betStakeMax
            ? Number(betScroller.betStakeMax) * 100
            : null,
          takeoutMin: betScroller.takeoutMin
            ? Number(betScroller.takeoutMin) * 100
            : null
        };

        if (!name) {
            addNotificationMessage('You have to add a name!', 'warning', 'Warning');
            return;
        }
        if(!betStakeMin || !betStakeMax){
            addNotificationMessage('You have to add a Min Bet and Max Bet!', 'warning', 'Warning');
            return;
        }
        if(betStakeMin >= betStakeMax){
            addNotificationMessage('Bet stake max must be bigger then bet stake min!', 'warning', 'Warning');
            return;
        }
        if(betStakeMin <=0 || betStakeMax <= 1){
            addNotificationMessage('Bet Stake Min/Max must be bigger than zero!', 'warning', 'Warning');
            return;
        }
        if(takeoutMin && takeoutMin <= 1){
            addNotificationMessage('Take out must be bigger than zero!', 'warning', 'Warning');
            return;
        }
        if(this.bsNameExist(betScrollers)){
            addNotificationMessage('The Bet Scroller allready exist!', 'warning', 'Warning');
            return;
        }

        if (this.props.wsConnectionStatus) {
          if (betScroller.hasOwnProperty('createdUserId')) {
            updateBScroller(betScroller, true);
          } else {
            //   console.log(betScroller);
            createBetScroller(betScroller);
          }
        } else {
          alert(
            'Web socket connection is not initialized yet. Please try again later.'
          );
        }
    }

    selectDataChange = (type, dataType, value, { action, removedValue }) => {
        let entityToSave = [...this.props.betScroller[type]],
            selectEntitiesUpdate = { ...this.state.selectEntities },
            selectedEntitiesUpdate = [...selectEntitiesUpdate[type]];

        switch (action) {
            case 'select-option':
                entityToSave = [...entityToSave, dataType === 'array' ? value[value.length - 1].value :
                    { 'id': value[value.length - 1].id, 'code': value[value.length - 1].code }];
                selectedEntitiesUpdate = [...selectedEntitiesUpdate, value[value.length - 1]];
                entityToSave = [...new Set(entityToSave)];
                break;
            case 'remove-value':
                entityToSave = entityToSave.filter(entity => entity !== removedValue.value);
                selectedEntitiesUpdate = selectedEntitiesUpdate.filter(entity => entity.value !== removedValue.value);
                break;
            case 'pop-value':
                entityToSave = entityToSave.filter(entity => dataType === 'array' ? entity : entity.code !== removedValue.value);
                selectedEntitiesUpdate = selectedEntitiesUpdate.filter(entity => entity.value !== removedValue.value);
                break;
            case 'clear':
                selectedEntitiesUpdate = [];
                entityToSave = [];
                break;
            default:
                break;
        }

        selectEntitiesUpdate[type] = selectedEntitiesUpdate;
        this.props.updateFilter(entityToSave, type);
        this.setState({ selectEntities: selectEntitiesUpdate });
    }

    //locally resets the data user for viewing react-select fields and calls the parent function which resets the data itself.
    resetSelectFields = () => {
        const selectEntitiesEmpty = {
            businessUnits: [],
            businessChannels: [],
            events: [],
            sports: [],
            riskCategories: [],
            betTypes: []
        };
        this.setState({ selectEntities: selectEntitiesEmpty }, () => {
            this.props.resetFilter();
        });
    }

    btnCss = (btnClassName) => {
        const { betScroller, ownerId } = this.props;
        return (
            betScroller.createdUserId !== ownerId &&
        betScroller.hasOwnProperty('createdUserId') ?
        `${btnClassName} efb-btn disabled` :
        `${btnClassName}`
        );
    }

    render() {
        const { betScroller, sportOptions } = this.props;
        const { selectEntities } = this.state;

        return (
            <div className="tab-content" id="betScrollerControllerContent">
                <div className="tab-pane card-body fade show active" id="betscroller-default" role="tabpanel" aria-labelledby="betscroller-default-tab">
                    <div className="card card-accordion">
                        <div id="betscroller-default-data" className="collapse show" aria-labelledby="betscroller-default-data-header">
                            <div className="card-body">
                                <form className="efb-form efb-form-bet-scroller-editor">
                                    <div className="form-row">
                                        <div className="form-label-group col">
                                            <input name="name"
                                                placeholder="BetScroller Name"
                                                type="text"
                                                required="required"
                                                className="form-control efb-input"
                                                value={betScroller.name}
                                                onChange={this.handleInputChange}
                                                id="betscroller-name"
                                            />
                                            <label htmlFor="betscroller-name">BetScroller Name</label>
                                        </div>
                                    </div>
                                    <hr />
                                    <div className="form-row">
                                        <div className="form-label-group col-lg-6">
                                            <Select
                                                value={selectEntities['businessUnits']}
                                                onChange={(e, actionMeta) => this.selectDataChange('businessUnits', 'array', e, actionMeta)}
                                                options={countries}
                                                styles={selectStyles}
                                                placeholder={'Select business units...'}
                                                isMulti={true}
                                            />
                                        </div>
                                        <div className="form-label-group col-lg-6">
                                            <Select
                                                value={selectEntities['businessChannels']}
                                                onChange={(e, actionMeta) => this.selectDataChange('businessChannels', 'array', e, actionMeta)}
                                                options={bisChannels}
                                                styles={selectStyles}
                                                placeholder={'Select business channels...'}
                                                isMulti={true}
                                            />
                                        </div>
                                    </div>
                                    <div className="form-row">
                                        <div className="form-label-group col-lg-6">
                                            <Select
                                                value={selectEntities['events']}
                                                onChange={(e, actionMeta) => this.selectDataChange('events', 'arrayOfObjects', e, actionMeta)}
                                                options={eventsDummy}
                                                styles={selectStyles}
                                                placeholder={'Select tournaments...'}
                                                isMulti={true}
                                            />
                                        </div>
                                        <div className="form-label-group col-lg-6">
                                            <Select
                                                value={selectEntities['sports']}
                                                onChange={(e, actionMeta) => this.selectDataChange('sports', 'arrayOfObjects', e, actionMeta)}
                                                options={sportOptions}
                                                styles={selectStyles}
                                                placeholder={'Select sports...'}
                                                isMulti={true}
                                            />
                                        </div>
                                    </div>
                                    <div className="form-row">
                                        <div className="form-label-group col-lg">
                                            <Select
                                                value={selectEntities['riskCategories']}
                                                onChange={(e, actionMeta) => this.selectDataChange('riskCategories', 'array', e, actionMeta)}
                                                options={riskCategoriesDummy}
                                                styles={selectStyles}
                                                placeholder={'Select risk categories...'}
                                                isMulti={true}
                                            />
                                        </div>
                                        <div className="form-label-group col-lg">
                                            <Select
                                                value={selectEntities['betTypes']}
                                                onChange={(e, actionMeta) => this.selectDataChange('betTypes', 'array', e, actionMeta)}
                                                options={betTypesDummy}
                                                styles={selectStyles}
                                                placeholder={'Select bet types...'}
                                                isMulti={true}
                                            />
                                        </div>
                                    </div>
                                    <hr />
                                    <div className="form-row">
                                        <div className="col">
                                            <h6>Bet Stake</h6>
                                            <div className="form-row">
                                                <div className="form-label-group col-md">
                                                    <div className="input-group">
                                                        <input type="number"
                                                            name="betStakeMin"
                                                            className="form-control efb-input"
                                                            placeholder="Min"
                                                            value={betScroller.betStakeMin ? betScroller.betStakeMin : ''}
                                                            onChange={this.handleInputChange}
                                                            required="required"
                                                            id="filter-bstake-min"
                                                            min="0"
                                                        />
                                                        <label htmlFor="filter-bstake-min">Min</label>
                                                        <div className="input-group-append">
                                                            <span className="input-group-text" id="basic-addon2">&euro;</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="form-label-group col-md">
                                                    <div className="input-group">
                                                        <input type="number"
                                                            name='betStakeMax'
                                                            className="form-control efb-input"
                                                            placeholder="Max"
                                                            value={betScroller.betStakeMax ? betScroller.betStakeMax : ''}
                                                            onChange={this.handleInputChange}
                                                            required="required"
                                                            id="filter-bstake-max"
                                                            min="0"
                                                        />
                                                        <label htmlFor="filter-bstake-max">Max</label>
                                                        <div className="input-group-append">
                                                            <span className="input-group-text" id="basic-addon2">&euro;</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col">
                                            <h6>Takeout</h6>
                                            <div className="form-label-group">
                                                <div className="input-group">
                                                    <input type="number"
                                                        name='takeoutMin'
                                                        className="form-control efb-input"
                                                        placeholder="More than"
                                                        value={betScroller.takeoutMin ? betScroller.takeoutMin : ''}
                                                        onChange={this.handleInputChange}
                                                        id="filter-takeout"
                                                        min="0"
                                                    />
                                                    <label htmlFor="filter-takeout">More than</label>
                                                    <div className="input-group-append">
                                                        <span className="input-group-text" id="basic-addon2">&euro;</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr />
                                    <div className="form-group d-flex flex-row justify-content-end">
                                        <Fragment>
                                            <Button
                                            onClick={this.resetSelectFields}
                                            name="cancel"
                                            cssClass={this.btnCss('efb-btn__light')}
                                            disabled={this.btnCss('efb-btn__light').includes('disabled')}
                                            >
                                                Clear All
                                            </Button>
                                            <Button
                                            cssClass={this.btnCss('btn btn-danger')}
                                            disabled={this.btnCss('btn btn-danger').includes('disabled')}
                                            onClick={this.deleteBetScroller}>
                                                 Delete BetScroller
                                            </Button>
                                            <Button
                                            onClick={this.createBetScrollerHandler}
                                            cssClass={this.btnCss('efb-btn__main')}
                                            disabled={this.btnCss('efb-btn__main').includes('disabled')}
                                            >
                                                Save BetScroller
                                            </Button>
                                        </Fragment>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

BetScrollerFilter.propTypes = {
    betScroller: PropTypes.object,
    betScrollers: PropTypes.array,
    updateFilter: PropTypes.func,
    createBetScroller: PropTypes.func,
    deleteBetScroller: PropTypes.func,
    wsConnectionStatus: PropTypes.bool,
    sportOptions: PropTypes.array,
    bUnitsProps: PropTypes.array,
    resetFilter: PropTypes.func,
    updatedBSScroller: PropTypes.func,
    addNotificationMessage: PropTypes.func
}

export default BetScrollerFilter;