import React from "react"
import { DataOption, FiltersMessage } from "../types/filter.type"
import { FilterAutocompleteField, FilterInputContainer, FilterTextField } from "./style"
import { CircularProgress, IconButton, SvgIcon } from "@mui/material"

export interface DataTableFilterAutoProps {
    style?: React.CSSProperties,
    messages: FiltersMessage,
    value: DataOption,
    options: (inputText: string) => Promise<DataOption[]>
    onChange: (value: DataOption | null) => void,
}

export const DataTableFilterAuto: React.FC<DataTableFilterAutoProps> = ({ style, value, options, onChange }) => {
    const [loading, setLoading] = React.useState(false);
    const [optionItems, setOptionItems] = React.useState<DataOption[]>();
    const [timer, setTimer] = React.useState<NodeJS.Timeout>();

    React.useEffect(() => {
        if (!!options && !optionItems) {
            setOptionItems([]);
            handleLoad(value && value.label ? value.label : '');
        }
    }, [options, optionItems, setOptionItems])

    const handleLoad = (inputText: string) => {
        setLoading(true);

        options(inputText)
            .then(result => {
                if (!!result) {
                    setOptionItems(result)
                }
            })
            .finally(() => {
                setLoading(false);
            })
    }
    const getValue = () => {
        return value
            ? value
            : 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 handleChange = (event: any, value: any) => {
        onChange(value)
    }
    const handleInputChange = (event: any) => {
        if (timer) {
            clearTimeout(timer);
        }
        setTimer(
            setTimeout(() => {
                handleLoad(event.target.value)
            }, 500)
        )
    }
    const handleClear = () => {
        onChange(null)
    }

    return (
        <FilterInputContainer style={style}>
            <FilterAutocompleteField
                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}
                            variant="standard"
                            InputProps={{
                                ...params.InputProps,
                                endAdornment: (
                                    <React.Fragment>
                                        {loading ? <CircularProgress color="inherit" size={20} /> : null}
                                        {endAdornment}
                                    </React.Fragment>
                                ),
                            }}
                            onChange={handleInputChange} />
                    )
                }}
            />
            <IconButton className="filter-clear-button" onClick={handleClear} >
                <CloseIcon />
            </IconButton>
        </FilterInputContainer>
    )
}

const CloseIcon = () => (
    <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
        </g>
    </SvgIcon>
)