'use client'

import React, { InputHTMLAttributes, ReactElement, useEffect, useRef, useState } from 'react';
import { Field, FieldProps } from 'formik';
import { IoIosArrowDown } from 'react-icons/io';
import { IconType } from 'react-icons/lib';

import DatePicker from 'react-datepicker';

import 'react-datepicker/dist/react-datepicker.css';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    title?: string;
    name: string;
    error?: string;
    date?: Date;
    dateSetter?: (date: Date) => void;
    initialDate?: Date;
    touched?: boolean;
    icon?: IconType;
    value?: string | number;
    className?: string;
    mask?: any;
    defaultValue?: string;
    textarea?: boolean;
    classContainer?: string;
}

export const Input: React.FC<InputProps> = ({
    title,
    error,
    touched,
    value,
    className,
    icon: Icon,
    mask,
    children,
    date,
    dateSetter,
    initialDate,
    ...rest }) => {
    const [isFocused, setIsFocused] = useState(false);
    const [isFilled, setIsFilled] = useState(false);
    const [isError, setIsError] = useState(false);

    useEffect(() => {
        setIsError(!!error && !!touched);
       
    }, [error, touched]);

    const handleFocused = (): void => {
        setIsFocused(true);
    };

    const handleBlur = (): void => {
        setIsFocused(false);
        setIsFilled(!!value);
    };

    const returnFieldComponent = (): ReactElement => {
        if (rest.type === 'textarea') {
            return <Field
                as="textarea"
                data-testid="input-item"
                className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46]"
                {...rest}
            />;
        }

        if (rest.type === 'date') {
            return (
                <Field
                    data-testid="input-item"
                    className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46]"
                    {...rest}
                >
                    {({ field }: FieldProps) => (
                        <>
                            {dateSetter && (
                                <DatePicker
                                    {...field}
                                    minDate={initialDate}
                                    dateFormat="dd/MM/yyyy"
                                    selected={date}
                                // onChange={(newDate: Date) => dateSetter(newDate)}
                                />
                            )}
                        </>
                    )}
                </Field>
            );
        }

        if (rest.type === 'select') {
            return (
                <>
                    <Field
                        as="select"
                        data-testid="input-item" {...rest}
                        className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46]"
                    >
                        {children}
                    </Field>

                    <div className="arrow-select">
                        <IoIosArrowDown size={22} />
                    </div>
                </>
            );
        }

        return <Field
            data-testid="input-item"
            className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46] focus:border-[2px]"
            {...rest}
        />;
    };

    return (
        <div
            onBlur={handleBlur}
            onFocus={handleFocused}
            className="flex flex-col w-full relative mb-2"
        >
            <h3 className="font-semibold text-sm text-[--primary]" data-testid="input-title">
                {title ? title : ''}
            </h3>

            <label
                data-testid="input-label"
                className="flex border rounded-lg overflow-hidden  focus-within:border-[--secundary]"
            >
                {returnFieldComponent()}

                {Icon && (
                    <span className="flex items-center justify-center w-10 h-10 bg-gray-100">
                        <Icon />
                    </span>
                )}
            </label>

            {isError && (
                <span className="absolute -bottom-4 text-red-500 text-xs left-0">
                    {error}
                </span>
            )}
        </div>
    );
};