<Service ref:Sounds
  service="Sounds"
  on:state="_onSoundsStateChange(file.id)"
  />

<div class="browser-{{ file.type }} {{ state }} browser-entry activateable upload--is-{{file.state}} {{ selected ? 'active' : '' }} {{ file.error ? 'upload-error' : '' }}">
  <div class="browser-entry-prew browser-entry-prew--{{ selectedIcon }}" on:click="fire( 'select', file )">
    <span class="browser-entry-icon"></span>
    {{#if file.error}}
      <svg class="icon icon-error"><use xlink:href="#icon-error"></use></svg>
    {{/if}}
    {{#if file.thumbnail}}
      <div class="browser-image-prew_img" style="background-image: url('{{ file.thumbnail }}')" width="112" height="71"/>
    {{/if}}
    <div class="progress-bar">
      {{#if file.progress === 100 && file.state === 'sending'}}
        <div style="width: 100%">Processing...</div>
      {{else}}
        <div class="progress-bar_fill" style="width: {{ file.progress }}%"></div>
      {{/if}}
    </div>
  </div>
  <div class="browser-entry-info" on:click="togglePlay()">{{ file.name }}</div>
</div>

<style>
  .browser-entry-icon {
    display: none;
  }

  .upload--is-complete .browser-entry-icon {
    display: block;
  }

  .browser-entry-info:before {
    display: none;
  }

  .browser-audio.upload--is-complete .browser-entry-info:before {
    display: inline-block;
  }

  .icon-error {
    position: absolute;
    top: 0;
    left: 45px;
    width: 20px;
    height: 100%;
    z-index: 1;
  }

  .browser-image-prew_img {
    opacity: 1;
  }

  .upload-error .browser-entry-prew:after {
    display: none;
  }

  .upload--is-sending .browser-image-prew_img,
  .upload-error .browser-image-prew_img {
    opacity: .2;
  }

  .progress-bar {
    background: #cccacf;
    position: absolute;
    top: 32px;
    width: 80px;
    left: 15px;
    height: 7px;
    border-radius: 3px;
    font-family: 'ProximaNova-Regular';
    font-size: 12px;
  }
  .progress-bar_fill {
    background: #adadb3;
    height: 100%;
    border-radius: inherit;
    transition: width 100ms linear;
  }

  .upload--is-sending .progress-bar {
    background: transparent;
  }

  .upload--is-complete .progress-bar {
    display: none;
  }
</style>

<script>
import Service from './service.html';

export default {
  components: { Service },
  data() {
    return {
      file: undefined,
      selected: false,
      state: 'paused',
      selectedIcon: 'check',
    };
  },
  methods: {
    togglePlay() {
      const file = this.get('file');
      if (file.type !== 'audio') return this.fire('select', file);
      if (!file.url) throw new Error('File is missing the URL');

      this.refs.Sounds.instance().load(file.id, file.url);
      this.refs.Sounds.instance().togglePlay(file.id);
    },

    _onSoundsStateChange(id) {
      this.set({
        state: this.refs.Sounds.instance().getState(id),
      });
    },
  },
};
</script>
