import { TextInput, TextInputSkeleton } from "carbon-components-react";
import { useField, FastField } from "formik";
import React, { useState, useEffect } from "react";

interface Props {
    name: string;
    label?: string;
    type?: string;
    isLoading?: boolean;
}

export default function GlobitsTextInput(props: Props) {
    const { label, name, type, isLoading } = props;
    const [field, meta] = useField(props.name);

    // const { values, setFieldValue } = useFormikContext();


    const [value, setValue] = useState(field.value);


    // useEffect(() => {
    //     if (value) console.log(value);
    // }, [value]);

    useEffect(() => {
        setValue(field.value);
    }, [field.value]);

    const onChange = (event: any) => {
        setValue(event.target.value);
        field.onChange(event);
    }

    return (
        <>
            {isLoading ? (
                <TextInputSkeleton />
            ) : (
                <TextInput
                    {...field}
                    {...props}
                    id={name}
                    type={type ? type : "text"}
                    value={value}
                    onChange={onChange}
                    labelText={label}
                />
            )}
        </>

    );
}