import React, { ChangeEvent } from 'react';
import Label from '../Label';
import './Input.scss';
import Icon from '../Icon';
import classNames from 'classnames';
import { colors } from '../../colors/colorConstants';

export interface InputProps {
  /**
   * Name | Name of the input field
   */
  name: string;
  /**
   * Label | field label to be displayed
   */
  label: string;
  /**
   * value | input field value
   */
  value: string | number;
  /**
   * varients to set color/style of the input field
   */
  variant?: 'default' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
  /**
   * type to set color/style of the input field
   */
  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
  /**
   * size | size of the input label text
   */
  size?: 'x-small' | 'small' | 'medium' | 'large';
  /**
   * error | If true, error message will be displayed
   */
  error?: boolean;
  /**
   * helperText | error, success, warning message to be shown
   */
  helperText?: string;
  /**
   * if true, error message icon will be displayed else it will be hidden
   */
  showMessageIcon?: boolean;
  /**
   * to disable the input field
   */
  disabled?: boolean;
  /**
   * if true, input field will be mandatory
   */
  required?: boolean;
  /**
   * placeholder for the input field
   */
  placeholder?: string;
  /**
   * classnames to style the input field
   */
  className?: string;
  /**
   * onchange action
   */
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;

  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;

  id?: string;

  style?: React.CSSProperties;

  /**
   * if on, suggestion popup will be displayed
   */
  autoComplete?: 'on' | 'off';

  /**
   *  minimum and maximum values for the number type input field and their functions
   */
  minValue?: number;
  maxValue?: number;
  setValue?: (newValue: string) => void;

  /**
   * background of the input field prop
   */
  isBackgroundTransparent?: boolean;
}

const Input = ({
  type = 'text',
  variant = 'default',
  name = '',
  size = 'small',
  label,
  disabled = false,
  required = false,
  placeholder = 'Enter input',
  value = '',
  helperText = '',
  error,
  showMessageIcon = false,
  className = '',
  onChange,
  autoComplete = 'off',
  minValue = -Infinity,
  maxValue = Infinity,
  setValue = () => {},
  isBackgroundTransparent = false,
  ...props
}: InputProps) => {
  let icon;
  if (variant === 'warning') {
    icon = <Icon name="warning" height={12} width={12} />;
  } else if (variant === 'success') {
    icon = <Icon name="success" height={12} width={12} />;
  } else if (variant === 'danger') {
    icon = <Icon name="cancel_icon" height={12} width={12} />;
  } else if (variant === 'info') {
    icon = <Icon name="info_icon" height={12} width={12} />;
  }

  const handleIncrementDecrement = (action: string) => {
    const parsedValue = typeof value === 'string' ? parseInt(value) : value;
    let updatedValue;

    if (action === 'increment') {
      updatedValue = parsedValue + 1;
      updatedValue = updatedValue <= maxValue ? updatedValue : maxValue;
    } else if (action === 'decrement') {
      updatedValue = parsedValue - 1;
      updatedValue = updatedValue >= minValue ? updatedValue : minValue;
    }
    setValue(String(updatedValue));
  };

  return (
    <div className="input-container">
      {label && (
        <Label label={label} size={size} required={required} color={variant} />
      )}
      <input
        {...props}
        type={type}
        disabled={disabled}
        className={classNames(
          `storybook-input storybook-input--${variant} default-input ${className}`,
          {
            ['storybook-input--isBackgroundTransparent']:
              isBackgroundTransparent,
          }
        )}
        placeholder={placeholder}
        value={value}
        name={name}
        onChange={onChange}
        required={required}
        autoComplete={autoComplete}
        min={minValue}
        max={maxValue}
        {...props}
      />
      {type === 'number' && (
        <div
          className={classNames('arrow-container', {
            ['arrow-container-label']: label,
          })}
        >
          <Icon
            name="arrow_up"
            hoverEffect={false}
            height={6}
            width={9}
            color={colors.ff_input_up_down_arrow_color}
            onClick={() => handleIncrementDecrement('increment')}
          />

          <Icon
            name="arrow_down"
            hoverEffect={false}
            height={6}
            width={9}
            color={colors.ff_input_up_down_arrow_color}
            onClick={() => handleIncrementDecrement('decrement')}
          />
        </div>
      )}
      {helperText &&
        (error ? (
          <span className={`storybook-input-msg storybook-input-msg--danger`}>
            {helperText}
          </span>
        ) : (
          <span
            className={`storybook-input-msg storybook-input-msg--${variant}`}
          >
            {showMessageIcon && icon}
            &nbsp;{helperText}
          </span>
        ))}
    </div>
  );
};
export default Input;