import { FC, useState, useRef } from 'react';

import ArrowBackIcon from '@material-hu/icons/material/ArrowBack';
import CloseIcon from '@material-hu/icons/material/Close';
import Box from '@material-hu/mui/Box';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Input, { InputProps } from '@material-hu/mui/Input';
import Tooltip from '@material-hu/mui/Tooltip';

import SearchIcon from 'src/icons/Search';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type SearchBarProps = Omit<InputProps, 'onChange'> & {
  onChange?: (param: string) => void;
  query?: string;
  placeholder?: string;
  withoutDivider?: boolean;
  isChat?: boolean;
};

/**
 * @deprecated Use `@material-hu/components/design-system/Inputs/Search` instead
 */
const SearchBar: FC<SearchBarProps> = props => {
  const {
    onChange,
    query,
    placeholder,
    inputProps,
    withoutDivider,
    isChat = false,
    sx = {},
  } = props;

  const [isFocused, setIsFocused] = useState(false);

  const { t } = useTranslation();
  const inputRef = useRef<HTMLInputElement | null>(null);

  const handleFocusInput = () => {
    setIsFocused(true);
  };

  const handleBlurInput = () => {
    onChange?.('');
    setIsFocused(false);
  };

  const handleClearInput = () => {
    onChange?.('');
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Escape') {
      handleBlurInput();
      inputRef.current?.blur();
    }
  };

  return (
    <>
      <Box
        sx={{
          alignItems: 'center',
          backgroundColor: 'background.default',
          borderRadius: isChat ? '6px' : 22,
          display: 'flex',
          height: 44,
          px: 2,
          mb: 2,
          mx: 2,
          ...sx,
        }}
        onKeyDown={handleKeyDown}
      >
        {!isFocused && (
          <SearchIcon
            sx={{ ml: 1 }}
            color="action"
            fontSize="small"
          />
        )}
        {isFocused && (
          <Tooltip title={t('BACK')}>
            <IconButton
              aria-label={t('BACK')}
              size="small"
              onClick={handleBlurInput}
            >
              <ArrowBackIcon color="primary" />
            </IconButton>
          </Tooltip>
        )}
        <Box
          sx={{
            flexGrow: 1,
            m: 2,
          }}
        >
          <Input
            inputRef={inputRef}
            inputProps={inputProps}
            fullWidth
            disableUnderline
            onChange={e => onChange?.(e.target.value)}
            placeholder={placeholder || t('SEARCH')}
            value={query}
            onFocus={handleFocusInput}
          />
        </Box>
        {isFocused && (
          <Tooltip title={t('DELETE')}>
            <IconButton
              aria-label={t('DELETE')}
              size="small"
              onClick={handleClearInput}
            >
              <CloseIcon />
            </IconButton>
          </Tooltip>
        )}
      </Box>
      {!withoutDivider && <Divider />}
    </>
  );
};

export default SearchBar;