/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { FC } from 'react';
import SkeletonLoader from '../common/SkeltonLoader';
import { FieldRenderProps } from 'react-final-form';

type FieldValue = string | number;
interface InputProps extends FieldRenderProps<FieldValue, HTMLElement> {
  formname: string;
  label?: string;
  labelClass?: string;
  nolabel?: boolean;
  input: any; // You can define a more specific type here (e.g., ChangeEvent)
  inputClass?: string;
  inputClassName?: string;
  meta: { touched: boolean; error?: string }; // Define more specifically if possible
  span?: React.ReactNode;
  button?: React.ReactNode;
  trim?: boolean;
  disablepaste?: boolean;
  isFilter?: boolean;
  isLoading?: boolean;
  disableOuter?: boolean;
  disableOuterClassName?: string;
  isChangepassword?: boolean;
  textarea?: boolean;
  bullet?: boolean;
  ismandatory?: boolean;
  buttonOuterClassname?: string;
  [key: string]: any;
  // For other dynamic props
}
const InputField: FC<InputProps> = ({
  formname,
  label,
  labelClass,
  nolabel,
  input,
  inputClass,
  inputClassName,
  meta,
  span,
  button,
  trim,
  disablepaste,
  isFilter,
  isLoading,
  disableOuter,
  disableOuterClassName,
  isChangepassword,
  textarea,
  bullet,
  ismandatory,
  buttonOuterClassname,
  ...rest
}) => {
  const { value: inputvalue, ...restvalue } = input;

  const isPassword = (val: string) =>
    ['confirmpassword', 'password', 'currentpassword'].includes(val);

  const inputattr = {
    ...(!isPassword(restvalue?.name) ? { ...restvalue, value: inputvalue } : { ...restvalue }),
    ...(trim && !isPassword(restvalue?.name) ? { value: inputvalue?.trim() } : {}),
    ...(disablepaste
      ? {
          onPaste(e: React.ClipboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
            e.preventDefault();
            return false;
          },
        }
      : {}),
  };

  const handleBullet = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    const targetTextarea = event.target as HTMLTextAreaElement;
    const start = targetTextarea.selectionStart;
    const { value: textvalue } = targetTextarea;
    const bulletPoint = '\u2022 ';

    if (textvalue.length === 0) {
      const novalue = bulletPoint;

      targetTextarea.value = novalue;
      targetTextarea.setSelectionRange(
        start + bulletPoint.length + 1,
        start + bulletPoint.length + 1,
      );
    }
    if (event.key === 'Enter') {
      event.preventDefault();

      let newValue = '';
      if (start === 0 || textvalue[start - 1] === '\n') {
        newValue = textvalue.substring(0, start) + bulletPoint + textvalue.substring(start);
      } else {
        newValue = `${textvalue.substring(0, start)}\n${bulletPoint}${textvalue.substring(start)}`;
      }
      targetTextarea.value = newValue;
      targetTextarea.setSelectionRange(
        start + bulletPoint.length + 1,
        start + bulletPoint.length + 1,
      );
    }
  };

  const init = () => (
    <>
      {span && span}
      {textarea ? (
        <textarea
          {...inputattr}
          {...rest}
          className={
            isFilter
              ? `custom-inp ${inputClassName}`
              : isChangepassword
                ? `user-inp ${inputClassName}`
                : `custom-inp custom-inp-img-area ${inputClassName}`
          }
          name=""
          id=""
          cols={30}
          rows={10}
          onKeyDown={(e) => {
            if (bullet) handleBullet(e);
          }}
        />
      ) : (
        <input
          {...inputattr}
          {...rest}
          className={
            isFilter
              ? `custom-inp ${inputClassName} ${rest?.disabled ? 'custom-inp-disabled' : ''}`
              : isChangepassword
                ? `user-inp ${inputClassName}`
                : `custom-grp-inp form-control ${inputClassName}`
          }
        />
      )}
      {button && button}
    </>
  );

  return (
    <div className="inp-block alert-msg-cover">
      {nolabel && label
        ? label
        : label && (
            <label htmlFor={formname} className={labelClass}>
              {label} {ismandatory ? <sup>*</sup> : null}
            </label>
          )}
      {(() => {
        if (isLoading) return <SkeletonLoader width={180} height={30} />;
        if (disableOuter)
          return <input {...inputattr} {...rest} className={disableOuterClassName} />;
        return (
          <div className={inputClass}>
            {buttonOuterClassname ? <div className={buttonOuterClassname}>{init()}</div> : init()}
          </div>
        );
      })()}
      {meta?.touched && meta?.error && <span className="alert-msg">{meta?.error}</span>}
    </div>
  );
};

export default InputField;