import React from 'react';
import type { PropsWithChildren } from 'react';
import classNames from 'classnames';

import { Anchor as CoreAnchor, type AnchorProps as CoreAnchorProps } from '@shoptet/ui-core-web';

import { type ButtonOwnProps, type ButtonProps, getButtonProps } from '../Button/Button';

// Pick from ButtonProps only, due in https://shoptet.atlassian.net/browse/FRONTEND-2564
export type ButtonProp = ButtonOwnProps & Pick<ButtonProps, 'disabled'>;

type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;

type A11yProps = Pick<CoreAnchorProps, 'a11yLabel' | 'a11yLabeledBy' | 'a11yDescription' | 'a11yDescribedBy'>;

export interface AnchorProps extends PropsWithChildren, HTMLAnchorProps {
  /**
   * URL of the link.
   */
  href?: string;
  /**
   * ID of the link.
   */
  id?: HTMLAnchorProps['id'];
  /**
   * Button variant.
   */
  button?: true | ButtonProp;
  /**
   * Function to be called on click.
   */
  onClick?: HTMLAnchorProps['onClick'];
  /**
   * The target property of the HTMLAnchorElement interface is a string
   * that indicates where to display the linked resource.
   *
   * [Read more at MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/target)
   */
  target?: HTMLAnchorProps['target'];
}

export function Anchor({
  button,
  onClick,
  'aria-label': a11yLabel,
  'aria-labelledby': a11yLabeledBy,
  'aria-description': a11yDescription,
  'aria-describedby': a11yDescribedBy,
  ...props
}: PropsWithChildren<AnchorProps>) {
  const isDisabled = !!(button && typeof button === 'object' && button.disabled);
  const a11yProps: A11yProps = { a11yLabel, a11yLabeledBy, a11yDescription, a11yDescribedBy };

  if (!button) {
    return <CoreAnchor {...props} {...a11yProps} onClick={onClick} />;
  }

  const { children, className, ...buttonRest } = getButtonProps({
    ...props,
    ...(typeof button === 'boolean' ? null : button),
  });

  return (
    <CoreAnchor
      {...buttonRest}
      {...a11yProps}
      className={classNames(className, isDisabled && 'btn-disabled')}
      disabled={isDisabled}
      onClick={onClick}
    >
      {children}
    </CoreAnchor>
  );
}