import { fromNillable, map, getOrElse } from '../../fp/Option';
import { pipe, noop } from '../../fp/function';

const focusTab = (element: HTMLButtonElement | null | undefined): void =>
  pipe(
    fromNillable(element),
    map(el => el.focus()),
    getOrElse(noop)
  );

const getTabVariant = ({
  active,
  disabled,
}: {
  active: boolean;
  disabled: boolean;
}): 'basic' | 'active' | 'disabled' => {
  if (disabled) {
    return 'disabled';
  }
  return active ? 'active' : 'basic';
};

const getTabWidth = (element: HTMLButtonElement | null | undefined): string =>
  pipe(
    fromNillable(element),
    map(el => getComputedStyle(el).width),
    getOrElse(() => '')
  );

export { focusTab, getTabVariant, getTabWidth };