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

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

/**
 * A temporary placeholder that is used while content is loading. The implementation was inspired
 * by [Shoelace](https://github.com/shoelace-style/shoelace), thanks Cory!
 */
@Component({
  tag: 'vm-skeleton',
  styleUrl: 'skeleton.css',
  shadow: true,
})
export class Skeleton {
  @State() hidden = false;

  /**
   * Determines which animation effect the skeleton will use.
   * */
  @Prop() effect: 'sheen' | 'none' = 'sheen';

  /** @internal */
  @Prop() ready: PlayerProps['ready'] = false;

  @Watch('ready')
  onReadyChange() {
    if (!this.ready) {
      this.hidden = false;
    } else {
      setTimeout(() => {
        this.hidden = true;
      }, 500);
    }
  }

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

  render() {
    return (
      <div
        class={{
          skeleton: true,
          hidden: this.hidden,
          sheen: this.effect === 'sheen',
        }}
      >
        <div class="indicator" />
      </div>
    );
  }
}