'use client';

import React from 'react'
import Tooltip from '../utils/Tooltip';
import clsx from 'clsx';
import { EyeToggleIcon } from '../icons/EyeToggleIcon';
import useToggle from '@/hooks/helpers/useToggle';
import { AUTH_PAGE_ELEMENT } from '@/enums';

type Props = {
    htmlFor: string;
    labelText?: React.ReactNode;
    value?: string;
    valid?: boolean
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;


function PasswordField({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }: Props) {
    const { state, toggle } = useToggle();

    return (
        <div
            spellCheck={false}
            className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
            <label
                className='absolute start-2 bg-container -top-2.5 px-2 text-[12px] text-foreground'
                htmlFor={htmlFor}>
                {labelText}
            </label>

            <Tooltip content={inputProps['aria-errormessage']} hidden={!inputProps['aria-errormessage']}>
                <input
                    type={state ? 'text' : 'password'}
                    onChange={onChange}
                    className={clsx(
                        inputProps['aria-errormessage'] && 'text-red-300!',
                        'py-2.5 pt-3.5 text-sm2 w-full outline-0 leading-6!'
                    )}
                    name={htmlFor}
                    {...inputProps} />
                <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={toggle}>
                    <EyeToggleIcon slash={state} className="pointer-events-none" />
                </button>
                {children}
            </Tooltip>
        </div>
    )
}

export default PasswordField