import type { Task } from '@lit/task';
import { html, type TemplateResult } from 'lit';

import { renderProgressIndicator } from '../components/progress-indicator';
import type { CardWideConfig } from '../config/schema/types';
import { errorToConsole } from './basic';

/**
 * Render the result of a Lit task.
 * @param host The host object.
 * @param task The Lit task.
 * @param completeFunc The function to call with the result.
 * @param inProgressFunc The function to call while in progress.
 * @returns A template.
 */
export const renderTask = <R>(
  task: Task<readonly unknown[], R>,
  completeFunc: (result: R) => TemplateResult | void,
  options?: {
    cardWideConfig?: CardWideConfig;
    inProgressFunc?: () => TemplateResult | void;
    errorFunc?: (e: Error) => TemplateResult | void;
  },
): TemplateResult => {
  const progressConfig = {
    ...(options?.cardWideConfig && { cardWideConfig: options.cardWideConfig }),
  };
  return html` ${task.render({
    initial: () =>
      options?.inProgressFunc?.() ?? renderProgressIndicator(progressConfig),
    pending: () =>
      options?.inProgressFunc?.() ?? renderProgressIndicator(progressConfig),
    error: (e: unknown) => {
      errorToConsole(e);
      return options?.errorFunc?.(e as Error);
    },
    complete: completeFunc,
  })}`;
};