"use client";
import Image from "next/image";
import Link from "next/link";
import { Separator } from "../ui/separator";
import { Share2 } from "lucide-react";
import { Article, ArticleList } from "@/features/posts/_lib/transformers";
import { TopicsEnum } from "@/config/enums";
import { cn } from "@/lib/utils/cn";
import { api } from "@/lib/trpc/client";
import formatDate from "@/lib/utils/format-date";

export default function PostSocials({
    data,
    type = "default"
}: {
    data: Article | ArticleList[number];
    type?: "default" | "inline" | "links";
}) {
    const { mutate: sharePost } = api.analytic.share.useMutation();

    const currentUrl = `${process.env.NEXT_PUBLIC_APP_URL}${data.url}`;
    const shareLinks = [
        {
            id: 1,
            label: "Del på Facebook",
            url: `https://www.facebook.com/sharer.php?u=${encodeURIComponent(currentUrl)}`,
            icon: "/icons/facebook_icon.svg"
        },
        {
            id: 2,
            label: "Del på Twitter",
            url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}`,
            icon: "/icons/x_icon.svg"
        },
        {
            id: 4,
            label: "Del via Email",
            url: `mailto:?subject=${encodeURIComponent(data.title || "Magasinet KBH")}&body=${encodeURIComponent(currentUrl)}`,
            icon: "/icons/icon-share-email.svg"
        }
    ];

    const isPhoto = data.topic === TopicsEnum.PHOTO;
    const isCityLife = data.topic === TopicsEnum.CITY_LIFE;
    const isOpinion = data.topic === TopicsEnum.OPINION;
    const isProject = data.topic === TopicsEnum.PROJECT;
    const isVision = data.topic === TopicsEnum.VISIONS;

    const date = formatDate(data.createdAt).split(" ");
    const day = date[0];
    const month = date[1].replace(".", "");
    const year = date[2];

    const onLinkClick = () => {
        sharePost({ postId: data.id });
    };

    if (type === "inline") {
        return (
            <div className='flex flex-wrap items-center gap-x-6 font-serif'>
                <ul className='flex gap-2'>
                    {shareLinks.map((item, index) => (
                        <li key={index}>
                            <Link href={item.url} className='rounded-full' onClick={onLinkClick}>
                                <Image
                                    width={34}
                                    height={34}
                                    alt={item.label}
                                    src={item.icon}
                                    className='size-9 rounded-full transition-transform hover:scale-110'
                                />
                            </Link>
                        </li>
                    ))}
                </ul>
                <div className='mt-2 text-neutral-600'>
                    <Share2 className='mb-1 inline-block size-4 fill-neutral-500' /> Delt{" "}
                    <span
                        className={cn(
                            "text-client-red",
                            (isPhoto || isCityLife) && "text-client-orange",
                            isOpinion && "text-client-green",
                            isProject && "text-black",
                            isVision && "text-client-blue"
                        )}
                    >
                        {data.stats.shares}
                    </span>{" "}
                    gange
                </div>
            </div>
        );
    }

    if (type === "links") {
        return (
            <div className='flex flex-wrap items-center gap-x-6 font-serif'>
                <ul className='flex gap-2'>
                    {shareLinks.map((item, index) => (
                        <li key={index}>
                            <Link href={item.url} className='rounded-full' onClick={onLinkClick}>
                                <Image
                                    width={34}
                                    height={34}
                                    alt={item.label}
                                    src={item.icon}
                                    className='size-9 rounded-full transition-transform hover:scale-110'
                                />
                            </Link>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }

    return (
        <div className='w-full font-serif leading-none'>
            <Separator className='my-2' />
            <div className='flex items-center gap-1 text-4xl text-neutral-500'>
                {day}
                <div className='flex flex-col text-base leading-none'>
                    <span>{month}</span>
                    <span>{year}</span>
                </div>
            </div>
            <Separator className='my-2' />
            <ul className='flex gap-2'>
                {shareLinks.map((item, index) => (
                    <li key={index}>
                        <Link href={item.url} className='rounded-full' onClick={onLinkClick}>
                            <Image
                                width={34}
                                height={34}
                                alt={item.label}
                                src={item.icon}
                                className='size-9 rounded-full transition-transform hover:scale-110'
                            />
                        </Link>
                    </li>
                ))}
            </ul>
            <div className='mt-2 text-neutral-600'>
                <Share2 className='mb-1 inline-block size-4 fill-neutral-500' /> Delt{" "}
                <span
                    className={cn(
                        "text-client-red",
                        (isPhoto || isCityLife) && "text-client-orange",
                        isOpinion && "text-client-green",
                        isProject && "text-black",
                        isVision && "text-client-blue"
                    )}
                >
                    {data.stats.shares}
                </span>{" "}
                gange
            </div>
            <Separator className='mt-2' />
        </div>
    );
}