import React, {
  useEffect,
  useRef,
  useState,
  useMemo,
  useCallback,
} from 'react';
import {
  CircularProgress,
  FormHelperText,
  TextField as TextInput,
} from '@material-ui/core';
import { Autocomplete as MaterialAutocomplete } from '@material-ui/lab';
import { useField } from '@unform/core';

import { AutocompleteProps, AutocompleteOption } from './types';

const Autocomplete: React.FC<AutocompleteProps> = ({
  id,
  name,
  label,
  options,
  loading,
  className,
  defaultValue,
  onChange,
  value: valueProp,
  multiple,
  style,
  children,
  ...restProps
}) => {
  const {
    fieldName,
    registerField,
    defaultValue: defaultFieldValue,
    error,
  } = useField(name);

  const inputRef = useRef(null);
  const defaultInputValue = useMemo(() => {
    if (multiple) {
      return defaultFieldValue || defaultValue || [];
    }
    return defaultFieldValue || defaultValue || '';
  }, [defaultFieldValue, defaultValue, multiple]);
  const [inputValue, setInputValue] = useState(defaultInputValue);

  const _handleChange = useCallback(
    (event, selectedOptions: AutocompleteOption | null) => {
      let value: number | number[] | string | string[];

      if (multiple && Array.isArray(selectedOptions)) {
        value = selectedOptions.map(item => String(item.value));
      } else {
        value = selectedOptions ? selectedOptions.value : '';
      }

      setInputValue(() => value);
    },
    [setInputValue, multiple],
  );

  useEffect(() => {
    if (fieldName) {
      registerField({
        name: fieldName,
        ref: inputRef.current,
        getValue() {
          return valueProp || inputValue;
        },
      });
    }
  }, [fieldName, registerField, _handleChange, valueProp, inputValue]);

  return (
    <>
      {/* <FormControl style={{ ...style }} className={className} error={!!error}> */}
      <MaterialAutocomplete
        {...restProps}
        id={id}
        options={options}
        // defaultValue={defaultInputValue || inputValue}
        loading={loading}
        multiple={multiple}

        // value/onChange real value selected by user
        // value={!valueProp ? inputValue : valueProp}
        onChange={_handleChange}

        // inputValue/onInputChange value displayed in the textbox
        // inputValue={String(inputValue)}
        // onInputChange={(event, newInputValue) => {
        //   console.log('onChange=>', newInputValue);
        //   // setInputValue(newInputValue);
        // }}

        getOptionLabel={item => item?.label}
        getOptionSelected={(option, value) => option.value === value.value}
        renderInput={params => {
          return (
            <TextInput
              {...params}
              name={name}
              label={label}
              variant="outlined"
              fullWidth
              ref={params.InputProps.ref}
              // ref={inputRef}
              InputProps={{
                ...params.InputProps,
                endAdornment: (
                  <>
                    {loading ? (
                      <CircularProgress color="inherit" size={20} />
                    ) : null}
                    {params.InputProps.endAdornment}
                  </>
                ),
              }}
            />
          );
        }}
      />

      {!!error && <FormHelperText>{error}</FormHelperText>}
      {/* </FormControl> */}
    </>
  );
};

export default React.memo(Autocomplete);