import { TextField as TextFieldTypo } from "@/types";

import { useState } from "react";
import { useIsMobile } from "@/hooks/use-mobile";
import { CircleQuestionMarkIcon, Eye, EyeClosedIcon, } from "lucide-react";
import { cn } from "@/lib/cn";

import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip";
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

export const TextField = ({
    label,
    labelIcon,
    className,
    type = "text",
    required = false,

    value,
    registerFor,
    register,
    errors,
    errorMessage,

    tooltip,
    textarea,
    toggleSeePassword = false,

    ...props
}: TextFieldTypo) => {
    const hasError = errors?.[registerFor];
    const isMobile = useIsMobile();
    const [inputType, setInputType] = useState(type);
    return (
        <div className="space-y-1 w-full">
            {
                label &&
                <div className="inline-flex items-center gap-1">
                    {labelIcon}
                    <Label htmlFor={(registerFor as string) || label} className="text-nowrap">
                        {required && '*'} {label}
                    </Label>
                </div>
            }
            <div className={cn("max-md:min-w-full 2xl:min-w-full max-w-3xl w-full relative", className)}>
                {
                    textarea ?
                        <Textarea
                            id={registerFor || label}
                            defaultValue={value}
                            cols={1}
                            className={cn('h-16 max-h-24', className)}
                            {...(register ? register(registerFor, {
                                required: required ? `${label} is required` : false,
                            }) : {})}
                            aria-invalid={!!hasError}

                            {...props as any}
                        />
                        :
                        <Input
                            id={registerFor || label}
                            type={inputType}
                            step={inputType === "number" ? '0.001' : undefined}
                            defaultValue={value}
                            autoComplete={inputType === "password" ? 'new-password' : 'off'}
                            {...(register ? register(registerFor, {
                                required: required ? `${label} is required` : false,
                            }) : {})}
                            className="w-full text-sm border-gray-300 focus:ring-gray-300 focus:ring-1"
                            aria-invalid={!!hasError}
                            required={required}

                            {...props as any}
                        />
                }
                {
                    tooltip &&
                    <>
                        {
                            isMobile ?
                                <Popover>
                                    <PopoverTrigger asChild>
                                        <Button
                                            className="absolute inset-y-0 end-0 rounded-s-none bg-primary-tw-400"
                                            type="button"
                                            size={"icon"}
                                            variant={"outline"}
                                        >
                                            <CircleQuestionMarkIcon />
                                        </Button>
                                    </PopoverTrigger>
                                    <PopoverContent
                                        className="w-fit !py-0.5 text-sm"
                                        side="top"
                                        align="end"
                                        sideOffset={4}
                                    >
                                        {tooltip}
                                    </PopoverContent>
                                </Popover>
                                :
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <Button
                                            className="absolute inset-y-0 end-0 rounded-s-none bg-primary-tw-400"
                                            type="button"
                                            size={"icon"}
                                            variant={"secondary"}
                                        >
                                            <CircleQuestionMarkIcon />
                                        </Button>
                                    </TooltipTrigger>
                                    <TooltipContent className="bg-popover text-popover-foreground [&_svg]:bg-popover [&_svg]:fill-popover">
                                        {tooltip}
                                    </TooltipContent>
                                </Tooltip>
                        }
                    </>
                }
                {
                    toggleSeePassword &&
                    <Button
                        type="button"
                        className="absolute inset-y-0 end-0 rounded-s-none transition bg-primary-tw-400"
                        onClick={() => setInputType((prev: string) => {
                            if (prev === "password") return "text"
                            return "password"
                        })}
                        size={"icon"}
                        variant={"secondary"}
                    >
                        {inputType === "password" ? <Eye /> : <EyeClosedIcon />}
                    </Button>
                }
            </div>
            {(hasError || errorMessage) && (
                <p className="text-sm text-destructive mt-1">
                    {hasError?.message || errorMessage}
                </p>
            )}
        </div>
    );
};