'use client';

import React, {
    forwardRef,
    useImperativeHandle,
    useLayoutEffect,
    useRef,
} from 'react';
import { bool, string } from 'prop-types';
import { InputLayoutProps } from './input-layout.types';

export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
    ({ indeterminate, typeInput, type, ...props }, ref) => {
        const checkboxRef = useRef<HTMLInputElement>(null);

        useLayoutEffect(() => {
            checkboxRef.current.indeterminate = indeterminate === true;
        }, []);

        useImperativeHandle(ref, () => checkboxRef.current);

        const classesType = typeInput || type;

        const extraClassStyles =
            `m3 m3-${classesType} ${props.className ?? ''}`.trimEnd();

        return (
            <input
                ref={checkboxRef}
                {...props}
                className={extraClassStyles.trimEnd()}
                type={type}
            />
        );
    },
);

InputLayout.propTypes = {
    typeInput: string,
    indeterminate: bool,
};
