import type { FormEvent } from 'react';
import { IconButton } from '@/components/common/IconButton';
import { ButtonGroup } from '@/components/ui/button-group';
import { Input } from '@/components/ui/input';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

export interface TableSearchInputProps {
    value: string;
    onChange: (value: string) => void;
    placeholder: string;
    /** Called on submit when not embedded in a parent form. */
    onSubmit?: () => void;
    /** Use inside an existing `<form>` — search button becomes `type="submit"` for that form. */
    embedded?: boolean;
    submitLabel?: string;
    className?: string;
    inputClassName?: string;
    disabled?: boolean;
    id?: string;
    name?: string;
}

export function TableSearchInput({
    value,
    onChange,
    placeholder,
    onSubmit,
    embedded = false,
    submitLabel,
    className,
    inputClassName,
    disabled = false,
    id,
    name,
}: TableSearchInputProps) {
    const { t } = useI18n();
    const label = submitLabel ?? t('common.table_search.submit');

    const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (! disabled) {
            onSubmit?.();
        }
    };

    const field = (
        <ButtonGroup className={cn('h-10 w-full min-w-0', className)}>
            <Input
                id={id}
                name={name}
                value={value}
                onChange={(event) => onChange(event.target.value)}
                placeholder={placeholder}
                disabled={disabled}
                className={cn('h-10 text-sm shadow-none', inputClassName)}
            />
            <TooltipProvider delayDuration={150}>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <IconButton
                            type="submit"
                            variant="contained"
                            color="primary"
                            size="md"
                            disabled={disabled}
                            className="shrink-0"
                            aria-label={label}
                            icon="material-symbols:search"
                        />
                    </TooltipTrigger>
                    <TooltipContent>{label}</TooltipContent>
                </Tooltip>
            </TooltipProvider>
        </ButtonGroup>
    );

    if (embedded) {
        return <div className="w-full lg:max-w-md">{field}</div>;
    }

    return (
        <form onSubmit={handleFormSubmit} className="w-full lg:max-w-md">
            {field}
        </form>
    );
}