import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
import './controls/player-controls';
import './seekbar/seek-bar';
import '../notifications/inline-notice';
import { PlayerRegion } from '@store/player-store';
import { designTokens } from '../../styles/tokens.css';

/**
 * The bottom bar. The transport lives here, and so does the one place
 * the player admits it could not do what it was told — an
 * `<inline-notice>` for the `player` region, floated above the bar
 * because `.bottom-bar` is a fixed 4em grid row with no room in it.
 */
@customElement('audio-player')
export class AudioPlayer extends LitElement {
  static override styles = [designTokens, css`
    :host {
      display: block;
      position: relative;
    }

    .audio-player-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .player-main {
      flex: 1;
      min-width: 0;
    }

    /* The phone transport (plan 016 B2): the buttons, and nothing
       else.  A media query inside a shadow root is answered by the
       viewport, not by the host, so this is the component saying what
       it drops at phone width rather than the shell reaching in.

       The seek bar goes because a 4px-tall target dragged with a thumb
       is not a seek control; seeking belongs to the full-screen
       now-playing view.

       Volume used to go from here too, and now goes from index.css
       instead: #42 moved the control out of this component and into
       the bar, so the shell is what can hide it. The reason is
       unchanged -- the hardware keys own volume on a phone, which is
       also why mediacontrols' Android handler implements no volume
       callback. */
    @media (max-width: 599px) {
      seek-bar {
        display: none;
      }
    }
  `];

  override render() {
    return html`
      <inline-notice
        region=${PlayerRegion}
        testid="player-message"
        floating
      ></inline-notice>
      <div class="audio-player-container">
        <div class="player-main">
          <player-controls></player-controls>
          <div>
            <seek-bar></seek-bar>
          </div>
        </div>
      </div>
    `;
  }
}