import { Devs } from "@utils/constants";
import { Logger } from "@utils/Logger";
import definePlugin from "@utils/types";
import { Message } from "@vencord/discord-types";
import { UserStore } from "@webpack/common";


export default definePlugin({
    name: "ThemeAttributes",
    description: "Adds data attributes to various elements for theming purposes",
    tags: ["Appearance", "Customisation"],
    authors: [Devs.Ven, Devs.Board],

    patches: [
        // Add data-tab-id to all tab bar items
        // This for examples applies to the User and Server settings sidebars
        {
            find: ".tabBarRef",
            replacement: {
                match: /style:this\.getStyle\(\),role:\i/,
                replace: "$&,'data-tab-id':this?.props?.id"
            }
        },

        // Add data-author-id and data-is-self to all messages
        {
            find: "Message must not be a thread starter message",
            replacement: {
                match: /"aria-setsize":-1,(?=.{0,150}?#{intl::MESSAGE_A11Y_ROLE_DESCRIPTION})/,
                replace: "...$self.getMessageProps(arguments[0]),$&"
            }
        },

        // add --avatar-url-<resolution> css variable to avatar img elements
        // popout profiles
        {
            find: "#{intl::LABEL_WITH_ONLINE_STATUS}",
            replacement: [
                {
                    match: /src:(\i)\?\?void 0.{1,50}"aria-hidden":!0/,
                    replace: "$&,style:$self.getAvatarStyles($1)"
                }
            ]
        },
        // chat avatars
        {
            find: "showCommunicationDisabledStyles",
            replacement: {
                match: /src:(\i),"aria-hidden":!0/,
                replace: "$&,style:$self.getAvatarStyles($1)"
            }
        }
    ],

    getAvatarStyles(src: string | null) {
        if (typeof src !== "string" || src.startsWith("data:")) return {};

        return Object.fromEntries(
            [128, 256, 512, 1024, 2048, 4096].map(size => [
                `--avatar-url-${size}`,
                `url(${src.replace(/\d+$/, String(size))})`
            ])
        );
    },

    getMessageProps(props: { message: Message; }) {
        try {
            const author = props.message?.author;
            const authorId = author?.id;
            return {
                "data-author-id": authorId,
                "data-author-username": author?.username,
                "data-is-self": authorId && authorId === UserStore.getCurrentUser()?.id,
            };
        } catch (e) {
            new Logger("ThemeAttributes").error("Error in getMessageProps", e);
            return {};
        }
    }
});