import React, { useRef } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'

import '../../style/components/Button.scss';

export interface RGButtonProps {
  className: string;
  label: string;
  icon: IconDefinition;
  iconIsRight: boolean;
  onClick: any;
  disabled: any;
  href: string;
  download: string;
}

export default function Button(props: RGButtonProps) {
  const anchor = useRef<HTMLAnchorElement>(null);
  const handleClick = (e : any) => {
    // Try to click the anchor link
    const currentAnchor = anchor.current;
    if (props.href && currentAnchor) {
      currentAnchor.click();
    }

    // Try to trigger the callback
    if (props.onClick) {
      props.onClick(e);
    }
  }
  return (
    <button
      className={`RGButton ${props.className}`}
      type="button"
      onClick={handleClick}
      disabled={props.disabled}
    >
      <a
        ref={anchor}
        href={props.href}
        download={props.download}
      />
      {
        props.disabled
          ? <></>
          : <div className="Disabled" />
      }
      {
        props.label
        ? (
          <FontAwesomeIcon
          icon={props.icon}
          className={`faIcon icon on-elevation ${props.iconIsRight ? 'right' : 'left' }`}
        />
        ) : null
      }
      <h4 className="OnPrimary">
        {props.label}
      </h4>
    </button>
  );
}