import React from 'react';
import { Form } from 'react-bootstrap';
import { ValidatorComponent } from 'react-form-validator-core';
import translateLabel from "../../translation"
import Select from 'react-select';

class SelectFormElement extends ValidatorComponent {

    constructor(props) {
        super(props);
        this.state = {
            selectedOption: null,
        }
        this.getChangeOptions = this.getChangeOptions.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    getChangeOptions(options) {
        let data = [{ text: translateLabel("SELECT") + " " + this.props.label, label: translateLabel("SELECT") + " " + this.props.label, value: "" }]
        if (options && options.length > 0) {
            options.forEach((item, key) => {
                data[key + 1] = { text: item.text, label: item.text, value: item.value };
            })
        }
        return data;
    }

    handleChange(selectedOption) {
        let { options } = this.props;
        let indexVal=0;
        options.forEach((item, key) => {
            if (item.value === selectedOption.value) {
                indexVal = key;
            }
        })
        let event = {
            target: {
                type: "select",
                id: this.props.id,
                name: this.props.name,
                label: selectedOption.text,
                value: selectedOption.value,
                selectedIndex: indexVal,
                options: [...options]
            }
        }

        this.setState({ selectedOption });
        this.props.onChange(event);

    };

    search(keyValue, myArray) {
        let returnObj;
        myArray.forEach(function (data, key) {
            if (myArray[key].value === keyValue) {
                myArray[key].label = myArray[key].text;
                returnObj = myArray[key];

            }

        });

        return returnObj;

    }


    render() {
        // const { errorMessages, validators, requiredError, validatorListener, id, name, label, value, type, asterisk, lang, readonly, placeholder, required, onChange } = this.props;
        let defaultOptions = "";
        if (this.props.options.length > 0 && (this.props.value !== undefined || this.props.value !== "")) {
            defaultOptions = this.search(this.props.value, this.props.options);
        }
        return (
            <div>
                <Form.Group>
                    <Form.Label dir={this.props.lang === this.props.langCheckValue ? "rtl" : "ltr"}>{this.props.label}{this.props.asterisk ? <span className='asterisk'>*</span> : ""}</Form.Label>
                    {/* <select className="form-control" name={this.props.name} id={this.props.id} value={this.props.value !== null ? this.props.value : ""} onChange={this.props.onChange} ref={(r) => { this.input = r; }}>
                        <option key='0' value="">{translateLabel("SELECT") + " " + this.props.label}</option>
                        {
                        this.props.options.map((data, index) => (
                            <option key={index + 1} value={data.value}>{data.text}</option>
                        ))
                        }
                    </select> */}
                    <Select
                        menuPortalTarget={document.body} 
                        styles={{ menuPortal: base => ({ ...base, zIndex: 10000 }) }}
                        ref={(r) => { this.input = r; }}
                        value={defaultOptions !== "" ? defaultOptions : this.state.selectedOption}
                        onChange={this.handleChange}
                        options={this.getChangeOptions(this.props.options)}
                        name={this.props.name}
                        id={this.props.id}
                        placeholder={translateLabel("Select...")}
                    />
                    {this.errorText()}
                </Form.Group>
            </div>);
    }
    errorText() {
        const { isValid } = this.state;
        if (isValid) {
            return null;
        }
        return (
            <div className="errorStr">
                {/* {translateLabel(this.getErrorMessage())} */}
                {translateLabel(this.getErrorMessage()) === "true" ? "" : translateLabel(this.getErrorMessage())}
            </div>
        );
    }
}
export default SelectFormElement;