import React from "react";
import Select from "react-select";
import { isMobile } from "../../modules/toolbox/devices";
import { ValueType, OptionsType, ActionMeta } from "react-select/src/types";
import "../../scss/components/SelectComponent.scss";
import { Styles } from "react-select/src/styles";
import { isNullOrUndefined } from "util";

interface IPropsSelectComponent {
    simpleValue?: boolean;
    isMulti?: boolean;
    isClearable?: boolean;
    name?: string;
    value: ValueType<ILabelValueNumber & IWithIsCategory>;
    options: OptionsType<ILabelValueNumber & IWithIsCategory>;
    onChange: (val: ValueType<ILabelValueNumber & IWithIsCategory>, action?: ActionMeta) => void;
    id?: string;
    placeholder?: string;
    noOptionsMessage?: ((obj: { inputValue: string }) => string | null) | undefined;
    isLoading?: boolean;
    // eslint-disable-next-line
    ref?: any;
    onInputChange?: (val: number | string) => void;
    isSearchable?: boolean;
    className?: string;
    // eslint-disable-next-line
    onMenuOpen?: any;
    styles?: Styles;
    isNative?: boolean;
    onFocus?: () => void;
    onBlur?: () => void;
}

export default class SelectComponent extends React.Component {
    props: IPropsSelectComponent = {
        onChange: (): void => {
            return;
        },
        onFocus: (): void => {
            return;
        },
        onBlur: (): void => {
            return;
        },
        options: [],
        value: []
    };
    static defaultProps: Partial<IPropsSelectComponent> = {
        isNative: true,
        className: "select-component-container"
    };
    constructor(props: IPropsSelectComponent) {
        super(props);
    }
    onChange(event: React.FormEvent): void {
        // @ts-ignore
        let value = event.target.value;
        if (this.props.options.length > 0) {
            value = parseInt(value);
        }
        this.props.onChange(
            // @ts-ignore
            this.props.options.find((e): boolean => e.value === value || parseInt(e.value) === value)
        );
    }
    render(): JSX.Element {
        if (isMobile() && this.props.isNative) {
            const value = Array.isArray(this.props.value) ? this.props.value[0] : this.props.value;
            const selectValue =
                "" +
                // @ts-ignore
                (!isNullOrUndefined(value) && !isNullOrUndefined(value.value)
                    ? "" + //
                      // @ts-ignore
                      (Array.isArray(value.value) ? value.value[0] : value.value)
                    : "");
            return (
                <select
                    className={"form-control " + this.props.className}
                    name={this.props.name ? this.props.name : `${Math.random()}`}
                    id={this.props.id ? `${this.props.id}` : `${Math.random()}`}
                    value={selectValue}
                    defaultValue={selectValue}
                    placeholder={this.props.placeholder}
                    onChange={this.onChange.bind(this)}
                >
                    <option value={""} />
                    {(this.props.options as (ILabelValueNumber & IWithIsCategory)[])
                        .filter((e): boolean => !e.isCategory)
                        .map(
                            (e: ILabelValueNumber & IWithIsCategory): JSX.Element => (
                                <option value={"" + e.value} key={"" + e.value} selected={selectValue === "" + e.value}>
                                    {e.label}
                                </option>
                            )
                        )}
                </select>
            );
        }
        return (
            <Select
                {...this.props}
                classNamePrefix="select-component"
                className={"select-component-container " + this.props.className}
            />
        );
    }
}