import React from "react"
import { DataFilterType, DataOption } from "../types/filter.type"
import { BodyInputAutocomplete, FilterTextField } from "./style"
import { CircularProgress } from "@mui/material"
import { NoData } from "../../services"

export interface SetEditorProps {
    value: DataFilterType,
    options: (value: [string, string]) => Promise<DataOption[]>
    onChange: (value: DataFilterType) => void,
    onEditting: (editting: boolean) => void,
}

export const SetEditor: React.FC<SetEditorProps> = ({ value, options, onChange, onEditting }) => {
    const [loading, setLoading] = React.useState(false);
    const [optionItems, setOptionItems] = React.useState<DataOption[]>();
    const [timer, setTimer] = React.useState<NodeJS.Timeout>();
    const [currentInput, setCurrentInput] = React.useState<DataFilterType>('');

    React.useEffect(() => {
        if (!!options && !optionItems) {
            setOptionItems([]);
            handleLoad([NoData, value as any], true);
        }
    }, [options, optionItems, setOptionItems])

    const getValue = () => {
        return currentInput
            ? { label: `${currentInput}`, value: currentInput ? value as any : null }
            : null
    }
    const handleIsOptionEqualToValue = (option: any, value: any) => {
        return (
            option.value !== undefined &&
            option.value !== null &&
            option.value !== '' &&
            option.value === value.value
        ) || (option.label === value.label)
    }
    const getInputValue = (value: [string, string]): [string, string] => {
        return value && value.length > 1 && !value[0] && value[1]
            ? [value[1], value[1]]
            : value
    }
    const handleLoad = (value: [string, string], replaceCurrentInput: boolean) => {
        setLoading(true);

        const inputValue = getInputValue(value);

        options(inputValue)
            .then(result => {
                if (!!result) {
                    if (result.length > 0 && !currentInput && replaceCurrentInput && inputValue && inputValue.length > 0 && inputValue[0]) {
                        const input = `${inputValue[0]}`.toLowerCase();
                        const item = result.find(x => x && (
                            (x.value && x.value.toLowerCase() === input) ||
                            (x.label && x.label.toLowerCase() === input)
                        ));
                        if (item) {
                            setCurrentInput(item.label);
                        }
                    }
                    setOptionItems(result);
                }
            })
            .finally(() => {
                setLoading(false);
            })
    }
    const handleChange = (event: any, option: any) => {
        onChange(option && option.value ? option.value : null);

        if (option && option.label) {
            setCurrentInput(option.label);
        }

        if (option) {
            event.stopPropagation();
            onEditting(false);
        }
    }
    const handleInputChange = (event: any) => {
        const input = event.target.value
            ? event.target.value
            : '';
        if (timer) {
            clearTimeout(timer);
        }
        setCurrentInput(input);
        setTimer(
            setTimeout(() => {
                handleLoad([input, input ? value as any : null], false)
            }, 500)
        )
    }

    return (
        <BodyInputAutocomplete
            options={optionItems ? optionItems : []}
            getOptionLabel={(option: any) => option.label}
            isOptionEqualToValue={handleIsOptionEqualToValue}
            value={getValue()}
            onChange={handleChange}
            renderInput={(params: any) => {
                let endAdornment = params.InputProps.endAdornment as any;
                const adornmentChildren = endAdornment && endAdornment.props && endAdornment.props.children
                    ? endAdornment.props.children
                    : null;

                if (adornmentChildren && Array.isArray(adornmentChildren) && adornmentChildren.length > 0) {
                    endAdornment = adornmentChildren[adornmentChildren.length - 1];
                }
                return (
                    <FilterTextField
                        {...params}
                        focused
                        variant="standard"
                        InputProps={{
                            ...params.InputProps,
                            autoFocus: true,
                            endAdornment: (
                                <React.Fragment>
                                    {loading ? <CircularProgress color="inherit" size={20} /> : null}
                                    {endAdornment}
                                </React.Fragment>
                            ),
                        }}
                        onChange={handleInputChange}
                        onBlur={() => onEditting(false)} />
                )
            }}
        />
    )
}