import { Button } from "@gouvfr-lasuite/cunningham-react"
import { useTranslation } from "react-i18next";
import { Icon, Spinner } from "@gouvfr-lasuite/ui-kit";
import clsx from "clsx";
import { Attachment } from "@/features/api/gen/models"
import { AttachmentHelper } from "@/features/utils/attachment-helper";
import { DriveIcon } from "@/features/forms/components/message-form/drive-icon";
import { DriveFile } from "@/features/forms/components/message-form/drive-attachment-picker";
import { DriveUploadButton } from "./drive-upload-button";
import { DrivePreviewLink } from "./drive-preview-link";

type AttachmentItemProps = {
    attachment: Attachment | File | DriveFile;
    isLoading?: boolean;
    canDownload?: boolean;
    variant?: "error" | "default";
    errorMessage?: string;
    errorAction?: () => void;
    onDelete?: () => void;
}

export const isAttachment = (attachment: Attachment | File | DriveFile): attachment is Attachment => {
    return 'blobId' in attachment;
}
export const isDriveFile = (attachment: Attachment | File | DriveFile): attachment is DriveFile => {
    return 'url' in attachment;
}
export const isInlineImage = (attachment: Attachment | File | DriveFile): boolean => {
    return isAttachment(attachment) && !!attachment.cid;
}

export const AttachmentItem = ({ attachment, isLoading = false, canDownload = true, variant = "default", errorMessage, errorAction, onDelete }: AttachmentItemProps) => {
    const { t, i18n } = useTranslation();
    const icon = AttachmentHelper.getIcon(attachment);
    const downloadUrl = isAttachment(attachment) || isDriveFile(attachment) ? AttachmentHelper.getDownloadUrl(attachment) : undefined;

    return (
        <div className={clsx("attachment-item", { "attachment-item--loading": isLoading, "attachment-item--error": variant === "error" })} title={attachment.name}>
            <div className="attachment-item-metadata">
                <div className="attachment-item-icon-container">
                    {variant === "error" ?
                        <Icon name="error" className="attachment-item-icon attachment-item-icon--error" />
                        :
                        (
                            <>
                                <img className="attachment-item-icon" src={icon} alt="" />
                                {isDriveFile(attachment) && <DriveIcon className="attachment-item-icon-drive" size="small" />}
                                {isInlineImage(attachment) && <Icon name="wysiwyg" className="attachment-item-icon-inline" />}
                            </>
                        )
                    }
                </div>
                <p className="attachment-item-size">{AttachmentHelper.getFormattedSize(attachment.size, i18n.resolvedLanguage)}</p>
            </div>
            <div className="attachment-item-content">
                <p className="attachment-item-name">{attachment.name}</p>
                {errorMessage && <p className="attachment-item-error-message">{errorMessage}</p>}
            </div>
            <div className="attachment-item-actions">
                {isLoading ? (
                    <Spinner />
                ) : (
                    <>
                        {
                            variant === "error" && errorAction &&
                            <Button
                                aria-label={t("Retry")}
                                title={t("Retry")}
                                icon={<Icon name="loop" />}
                                size="medium"
                                color={variant === "error" ? "error" : "brand"}
                                variant="tertiary"
                                onClick={errorAction}
                            />
                        }
                        {
                            canDownload && downloadUrl && (
                                <>
                                    <Button
                                        aria-label={t("Download")}
                                        title={t("Download")}
                                        size="medium"
                                        icon={<Icon name="download" />}
                                        color={variant === "error" ? "error" : "brand"}
                                        variant="tertiary"
                                        href={downloadUrl}
                                        download={attachment.name}
                                    />
                                    {isAttachment(attachment) && <DriveUploadButton attachment={attachment} />}
                                </>
                            )
                        }
                        {isDriveFile(attachment) && <DrivePreviewLink fileId={attachment.id} />}
                        {
                            onDelete &&
                            <Button
                                aria-label={t("Delete")}
                                title={t("Delete")}
                                icon={<Icon name="close" />}
                                size="medium"
                                color={variant === "error" ? "error" : "brand"}
                                variant="tertiary"
                                onClick={onDelete}
                            />
                        }
                    </>
                )}
            </div>
        </div>
    )
}
