import React from 'react';
import cn from 'classnames';

type ButtonProps = {
  buttonType: 'primary' | 'secondary' | 'iconOnly';
  size: 's' | 'm' | 'l';
  arrow?: 'right' | 'left';
  children?: React.ReactNode;
  handleTrigger?: () => void;
  isDisabled?: boolean;
};

// This is temporary unttil icons are implemented
const ArrowIcon = props => {
  if (props.arrow === 'right') {
    return (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <path
          d="M4957.9,3422.124l-.018-.018a2.989,2.989,0,0,1,0-4.233L4982.81,3393l-24.93-24.873a2.988,2.988,0,0,1,0-4.232l.018-.019a3.006,3.006,0,0,1,4.243,0l27.523,27.46a2.151,2.151,0,0,1,.129,3.2l-27.653,27.588a3.006,3.006,0,0,1-4.243,0Z"
          transform="translate(-4941.001 -3360.875)"
        />
      </svg>
    );
  }
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <path
        d="M4989.549,3422.124l.018-.018a2.989,2.989,0,0,0,0-4.233L4964.637,3393l24.93-24.873a2.988,2.988,0,0,0,0-4.232l-.018-.019a3.006,3.006,0,0,0-4.243,0l-27.523,27.46a2.151,2.151,0,0,0-.129,3.2l27.653,27.588a3.006,3.006,0,0,0,4.243,0Z"
        transform="translate(-4942.445 -3360.875)"
      />
    </svg>
  );
};

export const Button: React.FC<ButtonProps> = ({
  buttonType = 'primary',
  size = 'm',
  arrow,
  children,
  handleTrigger = () => {},
  isDisabled,
}: ButtonProps) => {
  const classes = cn(
    'bfo-button',
    `bfo-button--${buttonType}`,
    `bfo-button--${size}`,
    arrow && `bfo-button--${arrow}`,
    isDisabled && 'bfo-button--disabled',
  );
  return (
    <button
      type="button"
      className={classes}
      onClick={() => handleTrigger()}
      disabled={isDisabled}
    >
      {buttonType !== 'iconOnly' && (
        <span className="bfo-button__text">{children}</span>
      )}

      {arrow && (
        <span className="bfo-button__icon">
          <ArrowIcon arrow={arrow} />
        </span>
      )}
    </button>
  );
};