import React, { ReactNode, useState } from 'react';
import { Text, TextInput, View, TextInputProps } from 'react-native';
import InformationGray from '../icons/information-gray.svg';
import InformationError from '../icons/information-error.svg';
import WarningAlert from '../icons/warning-alert.svg';
import SuccessCheckmark from '../icons/success-checkmark.svg';
import { classNames } from '../utils';

export enum InputStateEnum {
  DEFAULT = 'DEFAULT',
  ERROR = 'ERROR',
  WARNING = 'WARNING',
  SUCCESS = 'SUCCESS',
}
export interface InputProps extends TextInputProps {
  status?: InputStateEnum;
  accessoryLeft?: React.ReactElement | (() => React.ReactElement) | ReactNode;
  accessoryRight?: React.ReactElement | (() => React.ReactElement) | ReactNode;
  label?: string;
  placeholder?: string;
  caption?: string;
  editable?: boolean;
  value: string;
  containerClassnames?: string;
  inputContainerClassnames?: string;
  onFocus?: () => void;
  onBlur?: () => void;
  onChangeText: (text: string) => void;
}

const RenderFeedbackText = (
  feedbackState: InputStateEnum,
  text: string,
  editable
) => {
  let textColorClass = 'text-[#737373]';
  let icon = <InformationGray height={16} width={16} />;

  if (feedbackState === InputStateEnum.SUCCESS) {
    icon = <SuccessCheckmark height={16} width={16} />;
    textColorClass = 'text-success-500';
  }
  if (feedbackState === InputStateEnum.WARNING) {
    icon = <WarningAlert height={16} width={16} />;
    textColorClass = 'text-warning-500';
  }
  if (feedbackState === InputStateEnum.ERROR) {
    icon = <InformationError height={16} width={16} />;
    textColorClass = 'text-error-500';
  }
  if (!editable) {
    textColorClass = 'text-neutral-500';
  }

  return (
    <View className="flex items-center flex-row">
      {icon}
      <Text className={`font-poppins-regular text-xs ml-2 ${textColorClass}`}>
        {text}
      </Text>
    </View>
  );
};

export const Input = React.forwardRef<any, InputProps>(
  (
    {
      status = InputStateEnum.DEFAULT,
      accessoryLeft,
      accessoryRight,
      label,
      placeholder = 'Enter something...',
      caption,
      editable = true,
      containerClassnames,
      inputContainerClassnames,
      onFocus,
      onBlur,
      value,
      onChangeText,
      ...textInputProps
    },
    ref
  ) => {
    const [isFocused, setIsFocused] = useState(false);
    const handleOnFocus = () => {
      setIsFocused(true);
      onFocus?.();
    };
    const handleOnBlur = () => {
      setIsFocused(false);
      onBlur?.();
    };
    const getBorderColor = () => {
      switch (status) {
        case InputStateEnum.ERROR:
          return 'border-error-500';
        case InputStateEnum.WARNING:
          return 'border-warning-500';
        case InputStateEnum.SUCCESS:
          return 'border-success-500';
        default:
          return 'border-neutral-500';
      }
    };

    return (
      <View className={containerClassnames}>
        {label && <Text className="font-poppins-medium text-sm">{label}</Text>}
        <View
          className={classNames(
            'flex flex-row items-center rounded-2xl p-4 w-full border my-2',
            `${isFocused ? 'border-brand-500' : getBorderColor()}`,
            `${
              !editable ? 'bg-neutral-50 border-neutral-500' : 'bg-transparent'
            }`,
            inputContainerClassnames
          )}
        >
          {accessoryLeft && (
            <View className="mr-2">
              {typeof accessoryLeft === 'function'
                ? accessoryLeft()
                : accessoryLeft}
            </View>
          )}
          <TextInput
            ref={ref}
            className="flex-1 font-poppins-regular text-sm"
            placeholder={placeholder}
            value={value}
            onFocus={handleOnFocus}
            onBlur={handleOnBlur}
            onChangeText={onChangeText}
            editable={editable}
            {...textInputProps}
          />
          {accessoryRight && (
            <View className="ml-2">
              {typeof accessoryRight === 'function'
                ? accessoryRight()
                : accessoryRight}
            </View>
          )}
        </View>
        {caption && RenderFeedbackText(status, caption, editable)}
      </View>
    );
  }
);