import { LitElement, html, customElement, property } from 'lit-element';
// https://www.flaticon.com/packs/music-and-multimedia-linear

@customElement('media-icon')
export class MediaIcon extends LitElement {
  @property({ type: Number }) size = 24;
  @property({ type: String }) icon = '';
  @property({ type: String }) d?: string;

  attributeChangedCallback(name: string, oldval: string, newval: string) {
    if (name === 'icon') {
      this.d = this.getDataPath(newval);
      this.requestUpdate();
    }
    super.attributeChangedCallback(name, oldval, newval);
  }

  getDataPath(icon: string) {
    switch (icon) {
      case 'play':
        return `M37.191,314c-13.138,0-19.018-11.259-19.018-22.416V22.416C18.172,11.259,24.052,0,37.189,0
        c4.253,0,8.663,1.302,13.11,3.87l233.108,134.58c7.894,4.559,12.42,11.319,12.42,18.549c0,7.23-4.526,13.99-12.419,18.548
        L50.298,310.132C45.852,312.698,41.442,314,37.191,314z M37.189,14c-4.365,0-5.017,5.272-5.017,8.416v269.168
        c0,3.143,0.652,8.416,5.018,8.416c1.211,0,3.255-0.346,6.108-1.993l233.109-134.584c3.394-1.959,5.42-4.361,5.42-6.424
        s-2.026-4.465-5.421-6.425L43.298,15.994C40.445,14.346,38.401,14,37.189,14z`;
        break;
      case 'pause':
        return `M91.47,0H75.343C58.538,0,44.867,13.671,44.867,30.476v253.048c0,16.805,13.671,30.477,30.476,30.477H91.47
        c16.805,0,30.477-13.672,30.477-30.477V30.476C121.946,13.671,108.274,0,91.47,0z M107.946,283.523
        c0,9.085-7.392,16.477-16.477,16.477H75.343c-9.085,0-16.476-7.392-16.476-16.477V30.476C58.867,21.391,66.258,14,75.343,14H91.47
        c9.085,0,16.477,7.391,16.477,16.476V283.523z
        M238.657,0H222.53c-16.805,0-30.477,13.671-30.477,30.476v253.048c0,16.805,13.672,30.477,30.477,30.477h16.127
	    	c16.805,0,30.476-13.672,30.476-30.477V30.476C269.133,13.671,255.462,0,238.657,0z M255.133,283.523
        c0,9.085-7.391,16.477-16.476,16.477H222.53c-9.085,0-16.477-7.392-16.477-16.477V30.476c0-9.085,7.392-16.476,16.477-16.476
        h16.127c9.085,0,16.476,7.391,16.476,16.476V283.523z`;
        break;
      default:
        return '';
    }
  }

  getViewBoxSize(icon: string) {
    return '0 0 314 314';
  }
  render() {
    return html`
      <style>
        :host {
          display: inline-block;
          --media-icon-color: var(--theme-color, #f14b05);
        }

        .svg-icon path,
        .svg-icon polygon,
        .svg-icon rect {
          fill: var(--svg-icon-color);
        }

        .svg-icon circle {
          stroke: var(--svg-icon-color);
          stroke-width: 1;
        }
      </style>
      <svg
        class="svg-icon"
        viewBox="${this.getViewBoxSize(this.icon)}"
        width="${this.size}"
        height="${this.size}"
      >
        <g>
          <path fill="none" d="${this.d}"></path>
        </g>
      </svg>
    `;
  }
}