<!--
Copyright (C) 2016-2021 Jones Magloire @Joxit

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<catalog-element>
  <!-- Begin of tag -->
  <div class="content"
    if="{!props.filterResults || state.nImages > 0 || matchSearch(props.filterResults, state.image)}">
    <material-card class="list highlight" expanded="{state.expanded}" onclick="{ onClick }">
      <material-waves onmousedown="{this.triggerLaunch}" center="true" color="#ddd"
        setLaunchListener="{ setLaunchListener }" />
      <span>
        <i class="material-icons">send</i>
        { state.image || state.repo }
        <div if="{state.images}" class="item-count right">
          { state.nImages } images
          <i class="material-icons animated {state.expanded ? 'expanded' : ''}">expand_more</i>
        </div>
      </span>
    </material-card>
    <catalog-element if="{ state.images }" filter-results="{ props.filterResults }"
      class="animated {!state.expanded && !props.filterResults ? 'hide' : ''} {state.expanding ? 'expanding' : ''}"
      each="{item in state.images}" item="{ item }" />
  </div>
  <script>
    import router from '../../scripts/router';
    import {
      matchSearch
    } from '../search-bar.riot';

    export default {
      onBeforeMount(props, state) {
        if (props.item.images && props.item.images.length === 1) {
          state.image = props.item.images[0];
        } else if (typeof props.item === 'string') {
          state.image = props.item;
        } else if (props.item.images && props.item.repo) {
          state.images = props.item.images;
          state.repo = props.item.repo;
          state.nImages = props.item.images.length;
        }
      },
      onBeforeUpdate(props, state) {
        if (props.filterResults && state.images) {
          state.nImages = state.images.filter(image => matchSearch(props.filterResults, image)).length;
        } else {
          state.nImages = state.images && state.images.length;
        }
      },
      onClick() {
        const state = this.state;
        if (!state.repo) {
          router.taglist(state.image);
        } else {
          this.update({
            expanded: !this.state.expanded,
            expanding: true
          });
          setTimeout(() => {
            this.update({
              expanding: false
            });
          }, 50)
        }
      },
      setLaunchListener(cb) {
        this.triggerLaunch = cb;
      },
      matchSearch
    }
  </script>
  <!-- End of tag -->
</catalog-element>