import { EmblaOptionsType } from 'embla-carousel';
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
import {
  CSSResultGroup,
  html,
  LitElement,
  PropertyValues,
  TemplateResult,
  unsafeCSS,
} from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { createRef, Ref, ref } from 'lit/directives/ref.js';
import { guard } from 'lit/directives/guard.js';
import { keyed } from 'lit/directives/keyed.js';
import { ConditionState, getOverriddenConfig } from '../../card-condition.js';
import { localize } from '../../localize/localize.js';
import liveStyle from '../../scss/live.scss';
import liveCarouselStyle from '../../scss/live-carousel.scss';
import liveProviderStyle from '../../scss/live-provider.scss';
import {
  CameraConfig,
  CardWideConfig,
  ExtendedHomeAssistant,
  frigateCardConfigDefaults,
  FrigateCardMediaPlayer,
  LiveConfig,
  LiveOverrides,
  LiveProvider,
  MediaLoadedInfo,
  Message,
  TransitionEffect,
} from '../../types.js';
import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
import { contentsChanged } from '../../utils/basic.js';
import {
  dispatchExistingMediaLoadedInfoAsEvent,
  dispatchMediaUnloadedEvent,
} from '../../utils/media-info.js';
import { dispatchViewContextChangeEvent, View } from '../../view/view.js';
import { AutoMediaPlugin } from './../embla-plugins/automedia.js';
import { Lazyload } from './../embla-plugins/lazyload.js';
import {
  FrigateCardMediaCarousel,
  wrapMediaLoadedEventForCarousel,
  wrapMediaUnloadedEventForCarousel,
} from '../media-carousel.js';
import '../next-prev-control.js';
import '../title-control.js';
import '../surround.js';
import '../zoomer.js';
import { CarouselSelect, EmblaCarouselPlugins } from '../carousel.js';
import { classMap } from 'lit/directives/class-map.js';
import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
import { CameraManager } from '../../camera-manager/manager.js';
import { HomeAssistant } from 'custom-card-helpers';
import { dispatchMessageEvent, dispatchErrorMessageEvent } from '../message.js';
import { HassEntity } from 'home-assistant-js-websocket';
import { CameraEndpoints } from '../../camera-manager/types.js';
import { playMediaMutingIfNecessary } from '../../utils/media.js';

interface LiveViewContext {
  // A cameraID override (used for dependencies/substreams to force a different
  // camera to be live rather than the camera selected in the view).
  overrides?: Map<string, string>;
}

declare module 'view' {
  interface ViewContext {
    live?: LiveViewContext;
  }
}

interface LastMediaLoadedInfo {
  mediaLoadedInfo: MediaLoadedInfo;
  source: EventTarget;
}

const FRIGATE_CARD_LIVE_PROVIDER = 'frigate-card-live-provider';

/**
 * Get the state object or dispatch an error. Used in `ha` and `image` live
 * providers.
 * @param element HTMLElement to dispatch errors from.
 * @param hass Home Assistant object.
 * @param cameraConfig Camera configuration.
 * @returns
 */
export const getStateObjOrDispatchError = (
  element: HTMLElement,
  hass: HomeAssistant,
  cameraConfig?: CameraConfig,
): HassEntity | null => {
  if (!cameraConfig?.camera_entity) {
    dispatchErrorMessageEvent(element, localize('error.no_live_camera'), {
      context: cameraConfig,
    });
    return null;
  }

  const stateObj = hass.states[cameraConfig.camera_entity];
  if (!stateObj) {
    dispatchErrorMessageEvent(element, localize('error.live_camera_not_found'), {
      context: cameraConfig,
    });
    return null;
  }

  if (stateObj.state === 'unavailable') {
    dispatchMessageEvent(element, localize('error.live_camera_unavailable'), 'info', {
      icon: 'mdi:connection',
      context: cameraConfig,
    });
    return null;
  }
  return stateObj;
};

@customElement('frigate-card-live')
export class FrigateCardLive extends LitElement {
  @property({ attribute: false })
  public conditionState?: ConditionState;

  @property({ attribute: false })
  public hass?: ExtendedHomeAssistant;

  @property({ attribute: false })
  public view?: Readonly<View>;

  @property({ attribute: false })
  public liveConfig?: LiveConfig;

  @property({ attribute: false, hasChanged: contentsChanged })
  public liveOverrides?: LiveOverrides;

  @property({ attribute: false })
  public cameraManager?: CameraManager;

  @property({ attribute: false })
  public cardWideConfig?: CardWideConfig;

  @property({ attribute: false })
  public microphoneStream?: MediaStream;

  // Whether or not the live view is currently in the background (i.e. preloaded
  // but not visible)
  @state()
  protected _inBackground?: boolean = false;

  // Intersection handler is used to detect when the live view flips between
  // foreground and background (in preload mode).
  protected _intersectionObserver: IntersectionObserver;

  // MediaLoadedInfo object and target from the underlying live object. In the
  // case of pre-loading these may be propagated later (from the original
  // source).
  protected _lastMediaLoadedInfo: LastMediaLoadedInfo | null = null;

  protected _messageReceivedPostRender = false;
  protected _renderKey = 0;

  constructor() {
    super();
    this._intersectionObserver = new IntersectionObserver(
      this._intersectionHandler.bind(this),
    );
  }

  /**
   * Called when the live view intersects with the viewport.
   * @param entries The IntersectionObserverEntry entries (should be only 1).
   */
  protected _intersectionHandler(entries: IntersectionObserverEntry[]): void {
    this._inBackground = !entries.some((entry) => entry.isIntersecting);

    if (
      !this._inBackground &&
      !this._messageReceivedPostRender &&
      this._lastMediaLoadedInfo
    ) {
      // If this isn't being rendered in the background, the last render did not
      // generate a message and there's a saved MediaInfo, dispatch it upwards.
      dispatchExistingMediaLoadedInfoAsEvent(
        // Specifically dispatch the event "where it came from", as otherwise
        // the intermediate layers (e.g. media-carousel which controls the title
        // popups) will not re-receive the events.
        this._lastMediaLoadedInfo.source,
        this._lastMediaLoadedInfo.mediaLoadedInfo,
      );
    }

    // Trigger a re-render which may be necessary if the prior render resulted
    // in a message.
    if (this._messageReceivedPostRender && !this._inBackground) {
      this.requestUpdate();
    }
  }

  /**
   * Determine whether the element should be updated.
   * @param _changedProps The changed properties if any.
   * @returns `true` if the element should be updated.
   */
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  protected shouldUpdate(_changedProps: PropertyValues): boolean {
    // Don't process updates if it's in the background and a message was
    // received (otherwise an error message thrown by the background live
    // component may continually be re-spammed hitting performance).
    return !this._inBackground || !this._messageReceivedPostRender;
  }

  /**
   * Component connected callback.
   */
  connectedCallback(): void {
    this._intersectionObserver.observe(this);
    super.connectedCallback();
  }

  /**
   * Component disconnected callback.
   */
  disconnectedCallback(): void {
    super.disconnectedCallback();
    this._intersectionObserver.disconnect();
  }

  /**
   * Master render method.
   * @returns A rendered template.
   */
  protected render(): TemplateResult | void {
    if (!this.hass || !this.liveConfig || !this.cameraManager || !this.view) {
      return;
    }

    // Notes:
    // - See use of liveConfig and not config below -- the carousel will
    //   independently override the liveConfig to reflect the camera in the
    //   carousel (not necessarily the selected camera).
    // - Various events are captured to prevent them propagating upwards if the
    //   card is in the background.
    // - The entire returned template is keyed to allow for the whole template
    //   to be re-rendered in certain circumstances (specifically: if a message
    //   is received when the card is in the background).
    const result = html`${keyed(
      this._renderKey,
      html`
        <frigate-card-live-carousel
          .hass=${this.hass}
          .view=${this.view}
          .liveConfig=${this.liveConfig}
          .inBackground=${this._inBackground}
          .conditionState=${this.conditionState}
          .liveOverrides=${this.liveOverrides}
          .cardWideConfig=${this.cardWideConfig}
          .cameraManager=${this.cameraManager}
          .microphoneStream=${this.microphoneStream}
          @frigate-card:message=${(ev: CustomEvent<Message>) => {
            this._renderKey++;
            this._messageReceivedPostRender = true;
            if (this._inBackground) {
              ev.stopPropagation();
            }
          }}
          @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
            this._lastMediaLoadedInfo = {
              source: ev.composedPath()[0],
              mediaLoadedInfo: ev.detail,
            };
            if (this._inBackground) {
              ev.stopPropagation();
            }
          }}
          @frigate-card:view:change=${(ev: CustomEvent<View>) => {
            if (this._inBackground) {
              ev.stopPropagation();
            }
          }}
        >
        </frigate-card-live-carousel>
      `,
    )}`;

    this._messageReceivedPostRender = false;
    return result;
  }

  /**
   * Get styles.
   */
  static get styles(): CSSResultGroup {
    return unsafeCSS(liveStyle);
  }
}

@customElement('frigate-card-live-carousel')
export class FrigateCardLiveCarousel extends LitElement {
  @property({ attribute: false })
  public hass?: ExtendedHomeAssistant;

  @property({ attribute: false })
  public view?: Readonly<View>;

  @property({ attribute: false })
  public liveConfig?: LiveConfig;

  @property({ attribute: false, hasChanged: contentsChanged })
  public liveOverrides?: LiveOverrides;

  @property({ attribute: false })
  public inBackground?: boolean;

  @property({ attribute: false })
  public conditionState?: ConditionState;

  @property({ attribute: false })
  public cardWideConfig?: CardWideConfig;

  @property({ attribute: false })
  public cameraManager?: CameraManager;

  @property({ attribute: false })
  public microphoneStream?: MediaStream;

  // Index between camera name and slide number.
  protected _cameraToSlide: Record<string, number> = {};
  protected _refMediaCarousel: Ref<FrigateCardMediaCarousel> = createRef();

  /**
   * The updated lifecycle callback for this element.
   * @param changedProperties The properties that were changed in this render.
   */
  updated(changedProperties: PropertyValues): void {
    super.updated(changedProperties);

    if (changedProperties.has('inBackground')) {
      this.updateComplete.then(async () => {
        const frigateCardMediaCarousel = this._refMediaCarousel.value;
        if (frigateCardMediaCarousel) {
          await frigateCardMediaCarousel.updateComplete;
          // If this has changed to be in the background (i.e. preloaded but not
          // visible) take the appropriate play/pause/mute/unmute actions.
          if (this.inBackground) {
            frigateCardMediaCarousel.autoPause();
            frigateCardMediaCarousel.autoMute();
          } else {
            frigateCardMediaCarousel.autoPlay();
            frigateCardMediaCarousel.autoUnmute();
          }
        }
      });
    }
  }

  /**
   * Get the transition effect to use.
   * @returns An TransitionEffect object.
   */
  protected _getTransitionEffect(): TransitionEffect {
    return (
      this.liveConfig?.transition_effect ??
      frigateCardConfigDefaults.live.transition_effect
    );
  }

  protected _getSelectedCameraIndex(): number {
    const cameraIDs = this.cameraManager?.getStore().getVisibleCameraIDs();
    if (!cameraIDs || !this.view) {
      return 0;
    }
    return Math.max(0, Array.from(cameraIDs).indexOf(this.view.camera));
  }

  /**
   * Get the Embla options to use.
   * @returns An EmblaOptionsType object or undefined for no options.
   */
  protected _getOptions(): EmblaOptionsType {
    return {
      draggable: this.liveConfig?.draggable,
      loop: true,
    };
  }

  /**
   * Get the Embla plugins to use.
   * @returns A list of EmblaOptionsTypes.
   */
  protected _getPlugins(): EmblaCarouselPlugins {
    const cameras = this.cameraManager?.getStore().getVisibleCameraIDs();
    return [
      // Only enable wheel plugin if there is more than one camera.
      ...(cameras && cameras.size > 1
        ? [
            WheelGesturesPlugin({
              // Whether the carousel is vertical or horizontal, interpret y-axis wheel
              // gestures as scrolling for the carousel.
              forceWheelAxis: 'y',
            }),
          ]
        : []),
      Lazyload({
        ...(this.liveConfig?.lazy_load && {
          lazyLoadCallback: (index, slide) =>
            this._lazyloadOrUnloadSlide('load', index, slide),
        }),

        lazyUnloadCondition: this.liveConfig?.lazy_unload,
        lazyUnloadCallback: (index, slide) =>
          this._lazyloadOrUnloadSlide('unload', index, slide),
      }),
      AutoMediaPlugin({
        playerSelector: FRIGATE_CARD_LIVE_PROVIDER,
        ...(this.liveConfig?.auto_play && {
          autoPlayCondition: this.liveConfig.auto_play,
        }),
        ...(this.liveConfig?.auto_pause && {
          autoPauseCondition: this.liveConfig.auto_pause,
        }),
        ...(this.liveConfig?.auto_mute && {
          autoMuteCondition: this.liveConfig.auto_mute,
        }),
        ...(this.liveConfig?.auto_unmute && {
          autoUnmuteCondition: this.liveConfig.auto_unmute,
        }),
      }),
    ];
  }

  /**
   * Returns the number of slides to lazily load. 0 means all slides are lazy
   * loaded, 1 means that 1 slide on each side of the currently selected slide
   * should lazy load, etc. `null` means lazy loading is disabled and everything
   * should load simultaneously.
   * @returns
   */
  protected _getLazyLoadCount(): number | null {
    // Defaults to fully-lazy loading.
    return this.liveConfig?.lazy_load === false ? null : 0;
  }

  /**
   * Get slides to include in the render.
   * @returns The slides to include in the render and an index keyed by camera
   * name to slide number.
   */
  protected _getSlides(): [TemplateResult[], Record<string, number>] {
    const visibleCameras = this.cameraManager?.getStore().getVisibleCameras();
    if (!visibleCameras) {
      return [[], {}];
    }

    const slides: TemplateResult[] = [];
    const cameraToSlide: Record<string, number> = {};

    for (const [cameraID, cameraConfig] of visibleCameras) {
      const liveCameraID =
        this.view?.context?.live?.overrides?.get(cameraID) ?? cameraID;
      const liveCameraConfig =
        cameraID === liveCameraID
          ? cameraConfig
          : this.cameraManager?.getStore().getCameraConfig(liveCameraID);

      const slide = liveCameraConfig
        ? this._renderLive(liveCameraID, liveCameraConfig, slides.length)
        : null;
      if (slide) {
        cameraToSlide[cameraID] = slides.length;
        slides.push(slide);
      }
    }
    return [slides, cameraToSlide];
  }

  /**
   * Handle the user selecting a new slide in the carousel.
   */
  protected _setViewHandler(ev: CustomEvent<CarouselSelect>): void {
    const cameras = this.cameraManager?.getStore().getVisibleCameras();
    if (cameras && ev.detail.index !== this._getSelectedCameraIndex()) {
      this._setViewCameraID(Array.from(cameras.keys())[ev.detail.index]);
    }
  }

  protected _setViewCameraID(cameraID?: string | null): void {
    if (cameraID) {
      this.view
        ?.evolve({
          camera: cameraID,
          // Reset the query and query results.
          query: null,
          queryResults: null,
        })
        // Don't yet fetch thumbnails (they will be fetched when the carousel
        // settles).
        .mergeInContext({ thumbnails: { fetch: false } })
        .dispatchChangeEvent(this);
    }
  }

  /**
   * Lazy load a slide.
   * @param _index The slide number to lazy load.
   * @param slide The slide to lazy load.
   */
  protected _lazyloadOrUnloadSlide(
    action: 'load' | 'unload',
    _index: number,
    slide: Element,
  ): void {
    if (slide instanceof HTMLSlotElement) {
      slide = slide.assignedElements({ flatten: true })[0];
    }

    const liveProvider = slide?.querySelector(
      FRIGATE_CARD_LIVE_PROVIDER,
    ) as FrigateCardLiveProvider | null;
    if (liveProvider) {
      liveProvider.disabled = action !== 'load';
    }
  }

  protected _renderLive(
    cameraID: string,
    cameraConfig: CameraConfig,
    slideIndex: number,
  ): TemplateResult | void {
    if (!this.liveConfig || !this.hass || !this.cameraManager) {
      return;
    }
    // The conditionState object contains the currently live camera, which (in
    // the carousel for example) is not necessarily the live camera this
    // <frigate-card-live-provider> is rendering right now.
    const conditionState = {
      ...this.conditionState,
      camera: cameraID,
    };

    const config = getOverriddenConfig(
      this.liveConfig,
      this.liveOverrides,
      conditionState,
    ) as LiveConfig;

    const cameraMetadata = this.cameraManager.getCameraMetadata(this.hass, cameraID);

    return html`
      <div class="embla__slide">
        <frigate-card-live-provider
          ?disabled=${this.liveConfig.lazy_load}
          .microphoneStream=${this.view?.camera === cameraID ? this.microphoneStream : undefined}
          .cameraConfig=${cameraConfig}
          .cameraEndpoints=${guard(
            [this.cameraManager, cameraID],
            () => this.cameraManager?.getCameraEndpoints(cameraID) ?? undefined,
          )}
          .label=${cameraMetadata?.title ?? ''}
          .liveConfig=${config}
          .hass=${this.hass}
          .cardWideConfig=${this.cardWideConfig}
          @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
            wrapMediaLoadedEventForCarousel(slideIndex, ev);
          }}
          @frigate-card:media:unloaded=${(ev: CustomEvent<void>) => {
            wrapMediaUnloadedEventForCarousel(slideIndex, ev);
          }}
        >
        </frigate-card-live-provider>
      </div>
    `;
  }

  protected _getCameraIDsOfNeighbors(): [string | null, string | null] {
    const cameras = this.cameraManager?.getStore().getVisibleCameras();
    if (!cameras || !this.view || !this.hass) {
      return [null, null];
    }
    const keys = Array.from(cameras.keys());
    const currentIndex = keys.indexOf(this.view.camera);

    if (currentIndex < 0 || cameras.size <= 1) {
      return [null, null];
    }

    return [
      keys[currentIndex > 0 ? currentIndex - 1 : cameras.size - 1],
      keys[currentIndex + 1 < cameras.size ? currentIndex + 1 : 0],
    ];
  }

  /**
   * Render the element.
   * @returns A template to display to the user.
   */
  protected render(): TemplateResult | void {
    if (!this.liveConfig || !this.view || !this.hass || !this.cameraManager) {
      return;
    }

    const [slides, cameraToSlide] = this._getSlides();
    this._cameraToSlide = cameraToSlide;
    if (!slides.length) {
      return;
    }

    const config = getOverriddenConfig(
      this.liveConfig,
      this.liveOverrides,
      this.conditionState,
    ) as LiveConfig;

    const [prevID, nextID] = this._getCameraIDsOfNeighbors();

    const overrideCameraID = (cameraID: string): string => {
      return this.view?.context?.live?.overrides?.get(cameraID) ?? cameraID;
    };

    const cameraMetadataPrevious = prevID
      ? this.cameraManager.getCameraMetadata(this.hass, overrideCameraID(prevID))
      : null;
    const cameraMetadataCurrent = this.cameraManager.getCameraMetadata(
      this.hass,
      overrideCameraID(this.view.camera),
    );
    const cameraMetadataNext = nextID
      ? this.cameraManager.getCameraMetadata(this.hass, overrideCameraID(nextID))
      : null;

    // Notes on the below:
    // - guard() is used to avoid reseting the carousel unless the
    //   options/plugins actually change.
    // - the 'carousel:settle' event is listened for (instead of
    //   'carousel:select') to only trigger the view change (which subsequently
    //   fetches thumbnails) after the carousel has stopped moving. This gives a
    //   much smoother carousel experience since network fetches are not at the
    //   same time as carousel movement (at a cost of fetching thumbnails a
    //   little later).

    return html`
      <frigate-card-media-carousel
        ${ref(this._refMediaCarousel)}
        .carouselOptions=${guard(
          [this.cameraManager, this.liveConfig],
          this._getOptions.bind(this),
        )}
        .carouselPlugins=${guard(
          [this.cameraManager, this.liveConfig],
          this._getPlugins.bind(this),
        ) as EmblaCarouselPlugins}
        .label="${cameraMetadataCurrent
          ? `${localize('common.live')}: ${cameraMetadataCurrent.title}`
          : ''}"
        .logo="${cameraMetadataCurrent?.engineLogo}"
        .titlePopupConfig=${config.controls.title}
        .selected=${this._getSelectedCameraIndex()}
        transitionEffect=${this._getTransitionEffect()}
        @frigate-card:media-carousel:select=${this._setViewHandler.bind(this)}
        @frigate-card:carousel:settle=${() => {
          // Fetch the thumbnails after the carousel has settled.
          dispatchViewContextChangeEvent(this, { thumbnails: { fetch: true } });
        }}
      >
        <frigate-card-next-previous-control
          slot="previous"
          .hass=${this.hass}
          .direction=${'previous'}
          .controlConfig=${config.controls.next_previous}
          .label=${cameraMetadataPrevious?.title ?? ''}
          .icon=${cameraMetadataPrevious?.icon}
          ?disabled=${prevID === null}
          @click=${(ev) => {
            this._setViewCameraID(prevID);
            stopEventFromActivatingCardWideActions(ev);
          }}
        >
        </frigate-card-next-previous-control>
        ${slides}
        <frigate-card-next-previous-control
          slot="next"
          .hass=${this.hass}
          .direction=${'next'}
          .controlConfig=${config.controls.next_previous}
          .label=${cameraMetadataNext?.title ?? ''}
          .icon=${cameraMetadataNext?.icon}
          ?disabled=${nextID === null}
          @click=${(ev) => {
            this._setViewCameraID(nextID);
            stopEventFromActivatingCardWideActions(ev);
          }}
        >
        </frigate-card-next-previous-control>
      </frigate-card-media-carousel>
    `;
  }

  /**
   * Get styles.
   */
  static get styles(): CSSResultGroup {
    return unsafeCSS(liveCarouselStyle);
  }
}

@customElement(FRIGATE_CARD_LIVE_PROVIDER)
export class FrigateCardLiveProvider
  extends LitElement
  implements FrigateCardMediaPlayer
{
  @property({ attribute: false })
  public hass?: ExtendedHomeAssistant;

  @property({ attribute: false })
  public cameraConfig?: CameraConfig;

  @property({ attribute: false })
  public cameraEndpoints?: CameraEndpoints;

  @property({ attribute: false })
  public liveConfig?: LiveConfig;

  // Whether or not to disable this entity. If `true`, no contents are rendered
  // until this attribute is set to `false` (this is useful for lazy loading).
  @property({ attribute: true, type: Boolean })
  public disabled = false;

  // Label that is used for ARIA support and as tooltip.
  @property({ attribute: false })
  public label = '';

  @property({ attribute: false })
  public cardWideConfig?: CardWideConfig;

  @property({ attribute: false })
  public microphoneStream?: MediaStream;

  @state()
  protected _isVideoMediaLoaded = false;

  protected _refProvider: Ref<LitElement & FrigateCardMediaPlayer> = createRef();

  // A note on dynamic imports:
  //
  // We gather the dynamic live provider import promises and do not consider the
  // update of the element complete until these imports have returned. Without
  // this behavior calls to the media methods (e.g. `mute()`) may throw if the
  // underlying code is not yet loaded.
  //
  // Test case: A card with a non-live view, but live pre-loaded, attempts to
  // call mute() when the <frigate-card-live> element first renders in the
  // background. These calls fail without waiting for loading here.
  protected _importPromises: Promise<unknown>[] = [];

  public async play(): Promise<void> {
    await this.updateComplete;
    await this._refProvider.value?.updateComplete;
    await playMediaMutingIfNecessary(this, this._refProvider.value);
  }

  public async pause(): Promise<void> {
    await this.updateComplete;
    await this._refProvider.value?.updateComplete;
    this._refProvider.value?.pause();
  }

  public async mute(): Promise<void> {
    await this.updateComplete;
    await this._refProvider.value?.updateComplete;
    this._refProvider.value?.mute();
  }

  public async unmute(): Promise<void> {
    await this.updateComplete;
    await this._refProvider.value?.updateComplete;
    this._refProvider.value?.unmute();
  }

  public isMuted(): boolean {
    return this._refProvider.value?.isMuted() ?? true;
  }

  public async seek(seconds: number): Promise<void> {
    await this.updateComplete;
    await this._refProvider.value?.updateComplete;
    this._refProvider.value?.seek(seconds);
  }

  public async setControls(controls: boolean): Promise<void> {
    await this.updateComplete;
    await this._refProvider.value?.updateComplete;
    this._refProvider.value?.setControls(controls);
  }

  /**
   * Get the fully resolved live provider.
   * @returns A live provider (that is not 'auto').
   */
  protected _getResolvedProvider(): Omit<LiveProvider, 'auto'> {
    if (this.cameraConfig?.live_provider === 'auto') {
      if (
        this.cameraConfig?.webrtc_card?.entity ||
        this.cameraConfig?.webrtc_card?.url
      ) {
        return 'webrtc-card';
      } else if (this.cameraConfig?.camera_entity) {
        if (this.cardWideConfig?.performance?.profile === 'low') {
          return 'image';
        } else {
          return 'ha';
        }
      } else if (this.cameraConfig?.frigate.camera_name) {
        return 'jsmpeg';
      }
      return frigateCardConfigDefaults.cameras.live_provider;
    }
    return this.cameraConfig?.live_provider || 'image';
  }

  /**
   * Determine if a camera image should be shown in lieu of the real stream
   * whilst loading.
   * @returns`true` if an image should be shown.
   */
  protected _shouldShowImageDuringLoading(): boolean {
    return (
      !!this.cameraConfig?.camera_entity &&
      !!this.hass &&
      !!this.liveConfig?.show_image_during_load
    );
  }

  /**
   * Component disconnected callback.
   */
  disconnectedCallback(): void {
    this._isVideoMediaLoaded = false;
  }

  /**
   * Record that video media is being shown.
   */
  protected _videoMediaShowHandler(): void {
    this._isVideoMediaLoaded = true;
  }

  /**
   * Called before each update.
   */
  protected willUpdate(changedProps: PropertyValues): void {
    if (changedProps.has('disabled')) {
      if (this.disabled) {
        this._isVideoMediaLoaded = false;
        dispatchMediaUnloadedEvent(this);
      }
    }
    if (changedProps.has('liveConfig')) {
      updateElementStyleFromMediaLayoutConfig(this, this.liveConfig?.layout);
      if (this.liveConfig?.show_image_during_load) {
        this._importPromises.push(import('./live-image.js'));
      }
    }
    if (changedProps.has('cameraConfig')) {
      const provider = this._getResolvedProvider();
      if (provider === 'jsmpeg') {
        this._importPromises.push(import('./live-jsmpeg.js'));
      } else if (provider === 'ha') {
        this._importPromises.push(import('./live-ha.js'));
      } else if (provider === 'webrtc-card') {
        this._importPromises.push(import('./live-webrtc-card.js'));
      } else if (provider === 'image') {
        this._importPromises.push(import('./live-image.js'));
      } else if (provider === 'go2rtc') {
        this._importPromises.push(import('./live-go2rtc.js'));
      }
    }
  }

  override async getUpdateComplete(): Promise<boolean> {
    // See 'A note on dynamic imports' above for explanation of why this is
    // necessary.
    const result = await super.getUpdateComplete();
    await Promise.all(this._importPromises);
    this._importPromises = [];
    return result;
  }

  /**
   * Master render method.
   * @returns A rendered template.
   */
  protected render(): TemplateResult | void {
    if (this.disabled || !this.hass || !this.liveConfig || !this.cameraConfig) {
      return;
    }

    // Set title and ariaLabel from the provided label property.
    this.title = this.label;
    this.ariaLabel = this.label;

    const provider = this._getResolvedProvider();
    const showImageDuringLoading =
      !this._isVideoMediaLoaded && this._shouldShowImageDuringLoading();
    const providerClasses = {
      hidden: showImageDuringLoading,
    };

    return html`
      <frigate-card-zoomer
        @frigate-card:zoom:zoomed=${() => this.setControls(false)}
        @frigate-card:zoom:unzoomed=${() => this.setControls(true)}
      >
        ${showImageDuringLoading || provider === 'image'
          ? html`
              <frigate-card-live-image
                ${ref(this._refProvider)}
                .hass=${this.hass}
                .cameraConfig=${this.cameraConfig}
                @frigate-card:media:loaded=${(ev: Event) => {
                  if (provider === 'image') {
                    // Only count the media has loaded if the required provider is
                    // the image (not just the temporary image shown during
                    // loading).
                    this._videoMediaShowHandler();
                  } else {
                    ev.stopPropagation();
                  }
                }}
              >
              </frigate-card-live-image
            ></frigate-card-zoomer>`
          : html``}
        ${provider === 'ha'
          ? html` <frigate-card-live-ha
              ${ref(this._refProvider)}
              class=${classMap(providerClasses)}
              .hass=${this.hass}
              .cameraConfig=${this.cameraConfig}
              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
            >
            </frigate-card-live-ha>`
          : provider === 'go2rtc'
          ? html`<frigate-card-live-go2rtc
              ${ref(this._refProvider)}
              class=${classMap(providerClasses)}
              .hass=${this.hass}
              .cameraConfig=${this.cameraConfig}
              .cameraEndpoints=${this.cameraEndpoints}
              .microphoneStream=${this.microphoneStream}
              .microphoneConfig=${this.liveConfig.microphone}
              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
            >
            </frigate-card-live-webrtc-card>`
          : provider === 'webrtc-card'
          ? html`<frigate-card-live-webrtc-card
              ${ref(this._refProvider)}
              class=${classMap(providerClasses)}
              .hass=${this.hass}
              .cameraConfig=${this.cameraConfig}
              .cameraEndpoints=${this.cameraEndpoints}
              .cardWideConfig=${this.cardWideConfig}
              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
            >
            </frigate-card-live-webrtc-card>`
          : provider === 'jsmpeg'
          ? html` <frigate-card-live-jsmpeg
              ${ref(this._refProvider)}
              class=${classMap(providerClasses)}
              .hass=${this.hass}
              .cameraConfig=${this.cameraConfig}
              .cameraEndpoints=${this.cameraEndpoints}
              .cardWideConfig=${this.cardWideConfig}
              @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
            >
            </frigate-card-live-jsmpeg>`
          : html``}
      </frigate-card-zoomer>
    `;
  }

  static get styles(): CSSResultGroup {
    return unsafeCSS(liveProviderStyle);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    FRIGATE_CARD_LIVE_PROVIDER: FrigateCardLiveProvider;
    'frigate-card-live-carousel': FrigateCardLiveCarousel;
    'frigate-card-live': FrigateCardLive;
  }
}