/** @jsxRuntime classic */
/** @jsx jsx */

import React, { FC, useState, useRef } from 'react';
import { Icons } from '../../types/theme';
import cx from 'classnames';
import { jsx, Theme, useTheme } from '@emotion/react';
import { StyledInput, DeleteButtonStyle, InputContainer } from './style';
import { getIcon, BnRemove } from '../../icons';
import { capitalize } from '../../functions';
import { Tooltip } from '../Tooltip';
import { ErrorMessage } from '../ErrorMessage';

export interface InputProps {
  placeholder?: string;
  label?: string;
  info?: string;
  helper?: string;
  helperContent?: string;
  sizer: 'M' | 'S';
  leftIcon?: Icons;
  rightIcon?: Icons;
  error?: string | undefined;
  setChange?: (val: string | number) => void;
  disableTrailing?: boolean;
  clear?: () => void;

  // colors?: IColors;
}

export const Textarea: FC<
  InputProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>
> = ({
  leftIcon = '',
  rightIcon = '',
  children,
  sizer = 'S',
  label = '',
  info = '',
  helper = '',
  helperContent = '',

  error = undefined,
  disableTrailing = true,
  setChange = () => {},
  clear = () => {},
  // colors = ThemeColors,
  ...rest
}) => {
  const [isFocus, setFocus] = useState<boolean>(false);
  const [innerValue, setInnerValue] = useState<string>('');
  const [isHover, setHover] = useState<boolean>(false);
  const [visited, setVisited] = useState<boolean>(false);
  const inputRef = useRef(null);
  const colors = useTheme();
  // const { colors: ThemeC } = useColors();

  return (
    <InputContainer
      className={cx({
        M: sizer === 'M',
        S: sizer === 'S',
      })}
      theme={{ ...colors }}
      style={{ ...rest.style }}
    >
      {label && (
        <div className="label">
          <div>
            {capitalize(label)}
            {rest.required && ' *'}
          </div>
          {info && <Tooltip content={info}>{getIcon('info', 'l')}</Tooltip>}
        </div>
      )}
      <StyledInput
        theme={{ ...colors }}
        className={cx({
          focus: isFocus,
          error: error && visited,
          hover: isHover,
          M: sizer === 'M',
          S: sizer === 'S',
        })}
        onClick={() => {
          if (inputRef.current) {
            //@ts-ignore
            inputRef.current.focus();
          }
        }}
        onMouseEnter={() => {
          setHover(true);
        }}
        onMouseLeave={() => {
          setHover(false);
        }}
      >
        {leftIcon && getIcon(leftIcon, 'r')}
        <textarea
          rows={4}
          ref={inputRef}
          {...rest}
          value={rest.value || innerValue}
          onChange={(e) => {
            setInnerValue(e.target.value);
            if (rest.onChange) {
              rest.onChange(e);
            }
          }}
          onFocus={(e) => {
            setFocus(true);

            if (rest.onFocus) {
              rest.onFocus(e);
            }
          }}
          onBlur={(e) => {
            setFocus(false);
            setVisited(true);
            if (rest.onBlur) {
              rest.onBlur(e);
            }
          }}
        />
        {!disableTrailing && innerValue.length > 0 && isHover && (
          <DeleteButton
            onClick={() => {
              if (inputRef && inputRef.current) {
                // @ts-ignore: Object is possibly 'null'.
                inputRef.current.focus();
              }
              setInnerValue('');
              if (clear) {
                clear();
              }
            }}
            theme={{ ...colors }}
          />
        )}
        {rightIcon && getIcon(rightIcon, 'l')}
      </StyledInput>
      <div style={{ minHeight: '15px' }}>
        {visited && <ErrorMessage error={error || ''} />}
      </div>
      {helper && (
        <div className="helper">
          {helperContent && (
            <Tooltip content={helperContent}>{getIcon('info', 'r')}</Tooltip>
          )}
          <div>{capitalize(helper)}</div>
        </div>
      )}
    </InputContainer>
  );
};

interface DeleteButtonProps {
  theme: Theme;
  onClick: () => void;
}
const DeleteButton = ({ theme, onClick }: DeleteButtonProps) => {
  return (
    <DeleteButtonStyle theme={theme} onClick={onClick}>
      <BnRemove />
    </DeleteButtonStyle>
  );
};