import React from 'react';
import classNames from 'classnames';
import { Icon, IconSrc, Spinner } from 'folds';
import * as css from './styles.css';

export type CallActionTone = 'neutral' | 'accent' | 'muted' | 'danger';

const discToneClass: Record<CallActionTone, string | undefined> = {
  neutral: undefined,
  accent: css.CallActionDiscAccent,
  muted: css.CallActionDiscMuted,
  danger: css.CallActionDiscDanger,
};

type CallActionButtonProps = {
  icon: IconSrc;
  label: string;
  // Spoken/long-form action (e.g. «Выключить микрофон») for screen readers;
  // the visible `label` stays a short noun.
  ariaLabel?: string;
  tone?: CallActionTone;
  disabled?: boolean;
  busy?: boolean;
  // Compact = web row: smaller disc, caption hidden (kept as the tooltip/aria).
  compact?: boolean;
  onClick: () => void;
};

// Vojo "Dawn" call-control affordance: a round icon disc with a caption below,
// in place of the stock folds IconButton + tooltip. Tone drives the disc
// colour (neutral / accent-on / muted / destructive).
export function CallActionButton({
  icon,
  label,
  ariaLabel,
  tone = 'neutral',
  disabled,
  busy,
  compact,
  onClick,
}: CallActionButtonProps) {
  return (
    <button
      type="button"
      className={classNames(css.CallActionButton, compact && css.CallActionButtonCompact)}
      onClick={onClick}
      disabled={disabled}
      aria-label={ariaLabel ?? label}
      title={compact ? ariaLabel ?? label : undefined}
    >
      <span
        className={classNames(
          css.CallActionDisc,
          compact && css.CallActionDiscCompact,
          discToneClass[tone]
        )}
        aria-hidden
      >
        {busy ? (
          <Spinner size="200" variant="Secondary" />
        ) : (
          <Icon size={compact ? '300' : '400'} src={icon} />
        )}
      </span>
      {!compact && <span className={css.CallActionLabel}>{label}</span>}
    </button>
  );
}
