import ImagePreview from "@/components/shared/image-preview";
import { ImageQuality } from "@/config/enums/image-quality";
import { widgetAlign, WidgetPosition } from "@/config/enums/tip-tap";
import { Article } from "@/features/posts/_lib/transformers";
import { cn } from "@/lib/utils";
import { Camera } from "lucide-react";
import Image from "next/image";
import { InlineImageProps } from "../../types/types";
import { collectMediaFromContent } from "@/helpers/post.helpers";

export default function ImageWidget({ props, post }: { props: InlineImageProps; post?: Article }) {
    if (!props || !props.media) {
        return null;
    }
    const { media, variant } = props;

    const mediaArray = Array.isArray(media) ? media : [media];

    const contentMedia = collectMediaFromContent(post?.content);
    const collectedMedia = [...contentMedia, ...(post?.preview ? [post.preview] : [])];

    return (
        <div className={cn(widgetAlign[variant])}>
            <div className={cn("flex gap-3")}>
                {mediaArray.map((item, index) => (
                    <figure key={index} className="w-full">
                        {!!collectedMedia.length ? (
                            <ImagePreview media={collectedMedia} currentImgId={item.id}>
                                <Image
                                    src={item.url}
                                    alt={item.alt || "artikelbillede"}
                                    width={1000}
                                    height={600}
                                    className="h-auto w-full object-cover"
                                    quality={ImageQuality.MEDIUM}
                                />
                            </ImagePreview>
                        ) : (
                            <Image
                                src={item.url}
                                alt={item.alt || "artikelbillede"}
                                width={1000}
                                height={600}
                                className="h-auto w-full grow object-cover"
                                quality={ImageQuality.MEDIUM}
                            />
                        )}
                        {(!!item?.caption || !!item?.author) && (
                            <figcaption
                                className={cn(
                                    "image-caption mt-2 flex gap-2 font-serif text-neutral-500 xl:float-left xl:max-w-75 xl:pr-15",
                                    variant === WidgetPosition.CENTER && "xl:float-none xl:max-w-full"
                                )}
                            >
                                <Camera className="stroke-client-red fill-client-red mt-0.5 inline-block size-3.5 shrink-0 [&>circle]:stroke-white [&>circle]:stroke-1" />
                                <span className="inline-block leading-[1.3]">
                                    {item?.caption?.replaceAll("&shy;", "\u00AD")}{" "}
                                    {item?.author && <i className="text-xs">Fotograf: {item.author}</i>}
                                </span>
                            </figcaption>
                        )}
                    </figure>
                ))}
            </div>
        </div>
    );
}