import { RefObject, useEffect, useMemo, useRef, useState } from 'react';

import { Button, Flex, Input, Spinner } from '@chakra-ui/react';
import {
  MdClose,
  MdEdit,
  MdKeyboardArrowDown,
  MdKeyboardArrowUp,
} from 'react-icons/md';

import { SelectList, SelectListModel } from '@/components/select/SelectList';
import { isNullOrUndefined } from '@/utils/validator';

export type SelectSingleProps = {
  options?: object[];
  value?: number | string;
  onChange?: (value: number | string | undefined) => void;
  keyKey?: string;
  keyValue?: string;
  // is locked for edition
  disabled?: boolean;
  ref?: RefObject<any>;
  // if set add capability to add the search item
  onCreate?: (data: string) => void;
  // if a suggestion exist at the auto compleat
  suggestion?: string;
};

export const SelectSingle = ({
  options,
  onChange,
  value,
  ref,
  keyKey = 'id',
  keyValue = keyKey,
  disabled = false,
  suggestion,
  onCreate,
}: SelectSingleProps) => {
  const [showList, setShowList] = useState(false);
  const transformedOption = useMemo(() => {
    return options?.map((element) => {
      return {
        id: element[keyKey],
        name: element[keyValue],
      } as SelectListModel;
    });
  }, [options, keyKey, keyValue]);
  const [hasSuggestion, setHasSuggestion] = useState<boolean>(
    onCreate && suggestion ? true : false
  );
  const [currentSearch, setCurrentSearch] = useState<string | undefined>(
    onCreate ? suggestion : undefined
  );
  useEffect(() => {
    console.log(
      `Update suggestion : ${onCreate} ${suggestion} ==> ${onCreate ? suggestion : undefined} .. ${onCreate && !isNullOrUndefined(suggestion) ? true : false}`
    );
    setCurrentSearch(onCreate ? suggestion : undefined);
    setHasSuggestion(onCreate && !isNullOrUndefined(suggestion) ? true : false);
  }, [suggestion]);
  const refFocus = ref ?? useRef<HTMLInputElement | null>(null);
  const selectedOptions = useMemo(() => {
    if (isNullOrUndefined(value)) {
      return undefined;
    }
    return transformedOption?.find((data) => data.id === value);
  }, [value, transformedOption]);

  const selectValue = (data?: SelectListModel) => {
    const tmpData = data?.id == selectedOptions?.id ? undefined : data;
    setShowList(false);
    if (onChange) {
      onChange(tmpData?.id);
    }
  };
  if (!transformedOption) {
    return <Spinner />;
  }
  function onChangeInput(value: string): void {
    setHasSuggestion(false);
    if (value === '') {
      setCurrentSearch(undefined);
    } else {
      setCurrentSearch(value);
    }
  }
  const onRemoveItem = () => {
    setHasSuggestion(false);
    if (selectedOptions) {
      if (onChange) {
        onChange(undefined);
      }
    }
    if (!showList || selectedOptions) {
      refFocus?.current?.focus();
    }
  };

  const createNewItem = !onCreate
    ? undefined
    : (data: string) => {
        onCreate(data);
        setCurrentSearch(undefined);
        setHasSuggestion(false);
      };

  return (
    <Flex direction="column" width="full" gap="0px">
      <Flex>
        <Input
          ref={refFocus}
          disabled={disabled}
          width="full"
          onChange={(e) => onChangeInput(e.target.value)}
          onFocus={() => setShowList(true)}
          onBlur={() => setTimeout(() => setShowList(false), 200)}
          value={
            showList
              ? (currentSearch ?? '')
              : (selectedOptions?.name ??
                (hasSuggestion ? `suggest: ${currentSearch}` : ''))
          }
          backgroundColor={
            showList || !selectedOptions ? undefined : 'green.800'
          }
          borderRadius="5px 0 0 5px"
        />
        <Button
          onClick={onRemoveItem}
          disabled={disabled}
          variant="outline"
          borderRadius="0 5px 5px 0"
          borderWidth="1px 1px 1px 0"
        >
          {selectedOptions ? (
            <MdClose color="gray.300" />
          ) : showList ? (
            <MdKeyboardArrowUp color="gray.300" />
          ) : hasSuggestion ? (
            <MdEdit color="gray.300" />
          ) : (
            <MdKeyboardArrowDown color="gray.300" />
          )}
        </Button>
      </Flex>
      {showList && (
        <SelectList
          options={transformedOption}
          selected={selectedOptions ? [selectedOptions] : []}
          search={currentSearch}
          onSelectValue={selectValue}
          onCreate={createNewItem}
        />
      )}
    </Flex>
  );
};
