import Button from "../layout/Button";
import Stack from "../layout/Stack";
import { ImagePlus, X } from "lucide-react";
import React, { DetailedHTMLProps } from "react";
import Card from "../elements/Card";
import Span from "../layout/Span";
import Center from "../layout/Center";
import imageInputToBase64, {
    ImageInputToBase64FunctionReturn,
} from "../utils/form/imageInputToBase64";
import { twMerge } from "tailwind-merge";

type ImageUploadProps = DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    onChange?: (imgData: ImageInputToBase64FunctionReturn | undefined) => any;
    fileInputProps?: DetailedHTMLProps<
        React.InputHTMLAttributes<HTMLInputElement>,
        HTMLInputElement
    >;
    placeHolderWrapper?: DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    previewImageWrapperProps?: DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    previewImageProps?: DetailedHTMLProps<
        React.ImgHTMLAttributes<HTMLImageElement>,
        HTMLImageElement
    >;
    label?: string;
    disablePreview?: boolean;
};

export default function ImageUpload({
    onChange,
    fileInputProps,
    placeHolderWrapper,
    previewImageWrapperProps,
    previewImageProps,
    label,
    disablePreview,
    ...props
}: ImageUploadProps) {
    const [src, setSrc] = React.useState<string | undefined>(undefined);
    const inputRef = React.useRef<HTMLInputElement>();

    return (
        <Stack
            {...props}
            className={twMerge("w-full h-[300px]", props?.className)}
        >
            <input
                type="file"
                className={twMerge("hidden", fileInputProps?.className)}
                {...fileInputProps}
                onChange={(e) => {
                    imageInputToBase64({ imageInput: e.target }).then((res) => {
                        setSrc(res.imageBase64Full);
                        onChange?.(res);
                        fileInputProps?.onChange?.(e);
                    });
                }}
                ref={inputRef as any}
            />

            {src ? (
                <Card
                    className="w-full relative h-full items-center justify-center"
                    {...previewImageWrapperProps}
                >
                    {disablePreview ? (
                        <Span className="opacity-50" size="small">
                            Image Uploaded!
                        </Span>
                    ) : (
                        <img
                            src={src}
                            className="w-full object-contain"
                            {...previewImageProps}
                        />
                    )}
                    <Button
                        variant="ghost"
                        className="absolute p-2 top-2 right-2 z-20"
                        onClick={(e) => {
                            setSrc(undefined);
                            onChange?.(undefined);
                        }}
                    >
                        <X className="text-slate-950 dark:text-white" />
                    </Button>
                </Card>
            ) : (
                <Card
                    className={twMerge(
                        "w-full h-full cursor-pointer hover:bg-slate-100 dark:hover:bg-white/20",
                        placeHolderWrapper?.className
                    )}
                    onClick={(e) => {
                        inputRef.current?.click();
                        placeHolderWrapper?.onClick?.(e);
                    }}
                    {...placeHolderWrapper}
                >
                    <Center>
                        <Stack className="items-center gap-2">
                            <ImagePlus className="text-slate-400" />
                            <Span size="smaller" variant="faded">
                                {label || "Click to Upload Image"}
                            </Span>
                        </Stack>
                    </Center>
                </Card>
            )}
        </Stack>
    );
}