import React from 'react';
import { Link as RouterLink } from '../i18n';
import { Link } from '../styles/components/shared/Link.style';
import { PrismicDocument, PrismicLink as PrismicLinkInterface } from 'easy-prismic-react';
import { Props as LinkProps } from '../styles/components/shared/Link.style';
import { hrefResolver, linkResolver } from '../prismic';

interface Props {
    link: PrismicLinkInterface|PrismicDocument<unknown>;
    onClick?: () => void;
    linkProps?: LinkProps;
}

export function serializeHyperlink (element, children, index, props?, linkProps?): React.ReactElement {
    if (!element.data) {
        return null;
    }
    if (element.data.link_type === 'Document') {
        return (
          <RouterLink
            {...props}
            key={index}
            href={hrefResolver(element.data)}
            as={linkResolver(element.data)}
          >
              <Link {...linkProps}>{children}</Link>
          </RouterLink>
        );
    } else {
        // Default link handling
        const targetAttr: string = element.data.target;
        const relAttr: string = element.data.target ? 'noopener' : '';
        return (
          <Link
            {...props}
            {...linkProps}
            key={index}
            href={element.data.url || linkResolver(element.data)}
            target={targetAttr}
            rel={relAttr}
          >
              {children}
          </Link>
        );
    }
}


const PrismicLink: React.FC<Props> = ({ link, onClick, children, linkProps }) => {
    return serializeHyperlink({ data: link }, children, 0, onClick ? { onClick } : {}, linkProps);
};

export default PrismicLink;