<!--
Copyright (C) 2016-2023 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/>.
-->
<remove-image>
  <material-button
    text-color="var(--neutral-text)"
    color="inherit"
    waves-color="var(--hover-background)"
    waves-center="true"
    title="This will delete the image."
    if="{ !props.multiDelete }"
    disabled="{ !state.contentDigest }"
    onClick="{ deleteImage }"
    icon
  >
    <i class="material-icons">delete</i>
  </material-button>
  <material-checkbox
    if="{ props.multiDelete }"
    title="Select this tag to delete it."
    disabled="{ !state.contentDigest }"
    onChange="{ handleCheckboxChange }"
    checked="{ state.checked }"
  >
  </material-checkbox>
  <script>
    import { Http } from '../../scripts/http';
    import router from '../../scripts/router';
    import { ACTION_CHECK_TO_DELETE, ACTION_UNCHECK_TO_DELETE, ACTION_DELETE_IMAGE } from './tag-table.riot';
    export default {
      onBeforeMount(props, state) {
        state.checked = props.checked;
        props.image.one('content-digest', (contentDigest) => {
          this.update({
            contentDigest,
          });
        });
      },
      onMounted(props, state) {
        props.image.trigger('get-content-digest');
      },
      onBeforeUpdate(props, state) {
        state.checked = props.checked;
      },
      deleteImage() {
        this.props.handleCheckboxChange(ACTION_DELETE_IMAGE, this.props.image);
      },
      handleCheckboxChange(event) {
        const action = event.target.checked ? ACTION_CHECK_TO_DELETE : ACTION_UNCHECK_TO_DELETE;
        this.props.handleCheckboxChange(action, this.props.image, event.shiftKey);
      },
    };
  </script>
</remove-image>
