import { Component, h, Prop } from '@stencil/core';

import { PlayerProps } from '../../../core/player/PlayerProps';
import { withComponentRegistry } from '../../../core/player/withComponentRegistry';
import { withPlayerContext } from '../../../core/player/withPlayerContext';

/**
 * Formats and displays the duration of the current media.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/time/end-time/end-time.png"
 *   alt="Vime end time component"
 * />
 */
@Component({
  tag: 'vm-end-time',
  styleUrl: 'end-time.css',
  shadow: true,
})
export class EndTime {
  /** @internal */
  @Prop() duration: PlayerProps['duration'] = -1;

  /** @internal */
  @Prop() i18n: PlayerProps['i18n'] = {};

  /**
   * Whether the time should always show the hours unit, even if the time is less than
   * 1 hour (eg: `20:35` -> `00:20:35`).
   */
  @Prop() alwaysShowHours = false;

  constructor() {
    withComponentRegistry(this);
    withPlayerContext(this, ['duration', 'i18n']);
  }

  render() {
    return (
      <vm-time
        label={this.i18n.duration}
        seconds={Math.max(0, this.duration)}
        alwaysShowHours={this.alwaysShowHours}
      />
    );
  }
}