import {
  CSSResultGroup,
  html,
  LitElement,
  PropertyValues,
  TemplateResult,
  unsafeCSS,
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';

import { CameraManager } from '../../camera-manager/manager.js';
import { ViewItemManager } from '../../card-controller/view/item-manager.js';
import { ViewManagerEpoch } from '../../card-controller/view/types.js';
import { MediaGridSelected } from '../../components-lib/media-grid-controller.js';
import { CardWideConfig } from '../../config/schema/types.js';
import { ViewerConfig } from '../../config/schema/viewer.js';
import { ResolvedMediaCache } from '../../ha/resolved-media.js';
import { HomeAssistant } from '../../ha/types.js';

import '../../patches/ha-hls-player.js';

import basicBlockStyle from '../../scss/basic-block.scss';

import './carousel';

@customElement('advanced-camera-card-viewer-grid')
export class AdvancedCameraCardViewerGrid extends LitElement {
  @property({ attribute: false })
  public hass?: HomeAssistant;

  @property({ attribute: false })
  public viewManagerEpoch?: ViewManagerEpoch;

  @property({ attribute: false })
  public viewerConfig?: ViewerConfig;

  @property({ attribute: false })
  public resolvedMediaCache?: ResolvedMediaCache;

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

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

  @property({ attribute: false })
  public viewItemManager?: ViewItemManager;

  private _renderCarousel(filterCamera?: string): TemplateResult {
    const selectedCameraID = this.viewManagerEpoch?.manager.getView()?.camera;

    // Get the camera's grid width factor from its dimensions config.
    const gridWidthFactor = filterCamera
      ? this.cameraManager?.getStore().getCameraConfig(filterCamera)?.dimensions?.grid
          ?.width_factor
      : undefined;

    return html`
      <advanced-camera-card-viewer-carousel
        grid-id=${ifDefined(filterCamera)}
        grid-width-factor=${ifDefined(gridWidthFactor)}
        .hass=${this.hass}
        .viewManagerEpoch=${this.viewManagerEpoch}
        .viewFilterCameraID=${filterCamera}
        .viewerConfig=${this.viewerConfig}
        .resolvedMediaCache=${this.resolvedMediaCache}
        .cameraManager=${this.cameraManager}
        .cardWideConfig=${this.cardWideConfig}
        .showControls=${!filterCamera || selectedCameraID === filterCamera}
        .viewItemManager=${this.viewItemManager}
      >
      </advanced-camera-card-viewer-carousel>
    `;
  }

  protected willUpdate(changedProps: PropertyValues): void {
    if (changedProps.has('viewManagerEpoch') && this._needsGrid()) {
      void import('../media-grid.js');
    }
  }

  private _needsGrid(): boolean {
    const view = this.viewManagerEpoch?.manager.getView();
    const cameraIDs = view?.queryResults?.getCameraIDs();
    return (
      !!view?.isGrid() &&
      !!view?.supportsMultipleDisplayModes() &&
      (cameraIDs?.size ?? 0) > 1
    );
  }

  private _gridSelectCamera(cameraID: string): void {
    const view = this.viewManagerEpoch?.manager.getView();
    this.viewManagerEpoch?.manager.setViewByParameters({
      params: {
        camera: cameraID,
        queryResults: view?.queryResults
          ?.clone()
          .promoteCameraSelectionToMainSelection(cameraID),
      },
    });
  }

  protected render(): TemplateResult {
    const view = this.viewManagerEpoch?.manager.getView();
    const cameraIDs = view?.queryResults?.getCameraIDs();
    if (!cameraIDs || !this._needsGrid()) {
      return this._renderCarousel();
    }

    return html`
      <advanced-camera-card-media-grid
        .selected=${view?.camera}
        .displayConfig=${this.viewerConfig?.display}
        @advanced-camera-card:media-grid:selected=${(
          ev: CustomEvent<MediaGridSelected>,
        ) => this._gridSelectCamera(ev.detail.selected)}
      >
        ${[...cameraIDs].map((cameraID) => this._renderCarousel(cameraID))}
      </advanced-camera-card-media-grid>
    `;
  }

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

declare global {
  interface HTMLElementTagNameMap {
    'advanced-camera-card-viewer-grid': AdvancedCameraCardViewerGrid;
  }
}