import React, { PropsWithChildren, useMemo } from "react";
import { ImageButtonVariant } from "../../buttons/ImageButton";
import ButtonLink, { ButtonLinkImageType } from "../../buttons/ButtonLink";
import { chakra } from "@chakra-ui/react";

type Props = {
    link: any
    attributes?: any
}

export function LinkView({ link, attributes, children }: PropsWithChildren<Props>) {
    const {
        class: className,
        download,
        href,
        recordId,
        recordType,
        type,
        ...linkProps
    } = link;

    // const p = {
    //     href: "pages:36",
    //     type: "button",
    //     linkCategory: "pages",
    //     target: "_blank",
    //     rel: "",
    //     class: "custom-link button",
    //     download: null,
    //     recordType: "pages",
    //     recordId: "36",
    // };

    console.log("link", attributes);

    const iconType = useMemo(() => download
        ? ButtonLinkImageType.Download
        : link.target === "_blank"
            ? ButtonLinkImageType.External
            : ButtonLinkImageType.Arrow
        , [download, link.target])

    if (type === "button") {
        return (
            <LinkView.LinkComponent link={link} {...attributes} target={link.target}>
                <ButtonLink {...attributes} variant={ImageButtonVariant.Current} iconType={iconType}>
                    {children}
                </ButtonLink>
            </LinkView.LinkComponent>
        );
    }

    return (
        <LinkView.LinkComponent
            link={link} {...attributes} target={link.target} href={href || '#'}>
            <chakra.span
                color="uat_orange"
                textDecor="underline"
                display="inline-block"
                {...attributes}
                {...linkProps}
            >
                {children}
            </chakra.span>
        </LinkView.LinkComponent>
    );
}

LinkView.LinkComponent = ({ children, ...props }) => {
    return (
        <>
            {children}
        </>
    )
}

LinkView.setLinkRenderer = (renderer: (props: any) => JSX.Element) => {
    LinkView.LinkComponent = renderer
}