<!--
 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/>.
-->
<add-registry-url>
  <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
    <div class="material-popup-title">Add your Server ?</div>
    <div class="material-popup-content">
      <material-input
        onkeyup="{ onKeyUp }"
        label="Server URL"
        text-color="var(--primary-text)"
        label-color="var(--neutral-text)"
        color="var(--accent-text)"
        valid="{ registryUrlValidator }"
      ></material-input>
      <span>Write your URL without /v2</span>
    </div>
    <div class="material-popup-action">
      <material-button
        class="dialog-button"
        waves-color="var(--hover-background)"
        onClick="{ add }"
        color="inherit"
        text-color="var(--primary-text)"
      >
        Add
      </material-button>
      <material-button
        class="dialog-button"
        waves-color="var(--hover-background)"
        onClick="{ props.onClose }"
        color="inherit"
        text-color="var(--primary-text)"
      >
        Cancel
      </material-button>
    </div>
  </material-popup>
  <script>
    import { addRegistryServers } from '../../scripts/utils';
    import router from '../../scripts/router';

    export default {
      onKeyUp(event) {
        // if keyCode is Enter
        if (event.keyCode === 13) {
          this.add();
        }
      },
      add() {
        const input = this.$('input');
        if (!input || !input.value || input.value.length === 0) {
          return this.props.onNotify('The input field is empty. Please enter an url.', true);
        }
        if (!input.value.startsWith('http')) {
          return this.props.onNotify('The input field should start with http:// or https://.', true);
        }
        const url = addRegistryServers(input.value);
        router.home();
        this.props.onServerChange(url);
        this.props.onClose();
        setTimeout(() => router.updateUrlQueryParam(url), 100);
      },
      registryUrlValidator(input) {
        return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input);
      },
    };
  </script>
</add-registry-url>
