import { html } from 'lit';

import { aiPolishConfigs } from '../../../../_common/configs/ai-polish/config.js';
import { isFormatSupported } from '../../../../_common/configs/text-format/utils.js';
import type { AffineFormatBarWidget } from '../format-bar.js';

export const AIButton = (formatBar: AffineFormatBarWidget) => {
  const root = formatBar.host;

  if (!isFormatSupported(root)) {
    return null;
  }

  return html`${aiPolishConfigs.map(
    ({ id, name, icon, action, activeWhen }) =>
      html`<icon-button
        size="32px"
        data-testid=${id}
        ?active=${activeWhen(root)}
        @click=${() => {
          action(root);
          formatBar.requestUpdate();
        }}
      >
        ${icon}
        <affine-tooltip>${name}</affine-tooltip>
      </icon-button>`
  )}`;
};