import React from 'react';
import Select from 'react-select';
import SelectField from './SelectField.js';

export default class EditAlertSelectInput extends React.Component{

    constructor(props) {
        super(props);
    }

    componentDidUpdate(){
        let filterClassName = this.props.label.split(' ').join('_');
        let filterElem = document.getElementsByClassName(filterClassName)[0];
        let _self = this;
        if(filterElem) {
            let selectedElem = filterElem.getElementsByClassName('Select-value-label')[0];
            if(selectedElem){
                selectedElem.addEventListener("mouseover", function () {
                    document.getElementById(filterClassName).style.display = 'block'
                    let singleSelectDefaultValue = (!_self.props.multiSelect && _self.props.value && _self.props.value.label) ? _self.props.value.label : null;
                    document.getElementById(filterClassName).getElementsByClassName('tooltip-text')[0].innerHTML = singleSelectDefaultValue
                })
                selectedElem.addEventListener("mouseout", function () {
                    console.log(document.getElementById(filterClassName));
                    document.getElementById(filterClassName).style.display = 'none'
                })
            }
        }
    }


    displaySelected = (selectedValues) => {
        let displayString = [];
        selectedValues.sort((a,b) => {
            return a.id-b.id;
        }).forEach((item) => {
            displayString.push(item.label);
        });
        displayString = displayString.join(', ');
        return  <span title={displayString}>{displayString.length>15 ? displayString.substr(0,12) + '...' : displayString}</span>;
    }

    handleValueChange = (selectedValues) => {
        console.log(this.props.label, selectedValues);
        this.props.onValueChange(this.props.label, selectedValues);

    }

    handleSelectValueChange = (val) => {
        console.log(this.props.label, val);
        this.props.onValueChange(this.props.label, val);
    }



    render(){
        const props = this.props;
        let singleSelectDefaultValue = (!this.props.multiSelect && this.props.value &&this.props.value.label)?this.props.value.value:null;
        let filterClassName = props.label.split(' ').join('_');
        return (
            <div className={(props.className?props.className:'')}>
                <div className="filter">
                    {
                        this.props.multiSelect ?
                            <SelectField label={props.label}
                                          key={props.label}
                                          multiple={true}
                                          separateLabel={true}
                                          items={props.data}
                                          defaultSelectedValues={this.props.value}
                                          displaySelected={this.displaySelected}
                                          multiLabel={props.multiLable}
                                          onSearchChange={props.onSearchChange}
                                          onValueChange={this.handleValueChange}
                                          disabled={this.props.disabled}
                            />
                            :
                            <div className="single-select">
                                <label>{props.label}</label>
                                    <div className="select-tooltip" data-id="tooltip" id={filterClassName}>
                                        <div className="tooltip-container">
                                            <div className="tooltip-text">--</div>
                                        </div>
                                    </div>
                                <Select
                                    className={`full_width form-field ${filterClassName}`}
                                    options={this.props.data}
                                    placeholder={props.label}
                                    value={singleSelectDefaultValue}
                                    onChange={(val)=>this.handleSelectValueChange(val)}
                                    disabled={this.props.disabled}
                                />
                            </div>
                    }
                </div>
            </div>

        );
    }
}

