'use client'
import { type ButtonHTMLAttributes, ForwardedRef, forwardRef } from 'react'

import { PktIcon } from '../icon/Icon'
declare global {
  interface Window {
    pktAnimationPath?: string
  }
}

if (typeof window !== 'undefined') {
  window.pktAnimationPath =
    window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
}

export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
  iconName?: string
  secondIconName?: string
  iconPath?: string
  secondIconPath?: string
  mode?: 'light' | 'dark'
  size?: 'xsmall' | 'small' | 'medium' | 'large'
  fullWidth?: boolean
  fullWidthOnMobile?: boolean
  color?:
    | 'blue'
    | 'blue-outline'
    | 'green'
    | 'green-outline'
    | 'green-dark'
    | 'green-dark-outline'
    | 'beige-light'
    | 'beige-dark-outline'
    | 'yellow'
    | 'yellow-outline'
    | 'red'
    | 'red-outline'
  skin?: 'primary' | 'secondary' | 'tertiary'
  variant?: 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left'
  state?: 'normal' | 'focus' | 'hover' | 'active'
  type?: 'button' | 'submit' | 'reset'
  isLoading?: boolean
  loadingAnimationPath?: string
}

export const PktButton = forwardRef(
  (
    {
      children,
      className,
      iconName = 'user',
      secondIconName = 'user',
      iconPath,
      secondIconPath,
      size = 'medium',
      fullWidth = false,
      fullWidthOnMobile = false,
      skin = 'primary',
      type = 'button',
      variant = 'label-only',
      state,
      color,
      isLoading = undefined,
      disabled = undefined,
      loadingAnimationPath = window.pktAnimationPath,
      ...props
    }: IPktButton,
    ref: ForwardedRef<HTMLButtonElement>,
  ) => {
    const classes = [
      className,
      'pkt-btn',
      size && `pkt-btn--${size}`,
      fullWidth && 'pkt-btn--full',
      fullWidthOnMobile && 'pkt-btn--full-small',
      skin && `pkt-btn--${skin}`,
      variant && `pkt-btn--${variant}`,
      color && `pkt-btn--${color}`,
      state && `pkt-btn--${state}`,
      isLoading && `pkt-btn--isLoading`,
    ]
      .filter(Boolean)
      .join(' ')

    return (
      <button
        {...props}
        aria-busy={isLoading || undefined}
        aria-disabled={disabled || undefined}
        disabled={disabled}
        className={classes}
        type={type}
        ref={ref}
      >
        {isLoading && (
          <PktIcon className="pkt-btn__icon pkt-btn__spinner" name="spinner-blue" path={loadingAnimationPath} />
        )}
        {variant !== 'label-only' && (
          <PktIcon className="pkt-btn__icon" name={iconName} {...(iconPath && { path: iconPath })}></PktIcon>
        )}
        <span className="pkt-btn__text">{children}</span>
        {variant === 'icons-right-and-left' && (
          <PktIcon
            className="pkt-btn__icon"
            name={secondIconName}
            {...(secondIconPath && { path: secondIconPath })}
          ></PktIcon>
        )}
      </button>
    )
  },
)

PktButton.displayName = 'PktButton'