<!--
// Sshwifty - A Web SSH client
//
// Copyright (C) 2019 Rui NI <nirui@gmx.com>
//
// 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 <https://www.gnu.org/licenses/>.
-->

<template>
  <window
    id="connect"
    flash-class="home-window-display"
    :display="display"
    @display="$emit('display', $event)"
  >
    <h1 class="window-title">Establish connection with</h1>

    <slot v-if="inputting"></slot>

    <connect-switch
      v-if="!inputting"
      :knowns-length="knowns.length"
      :tab="tab"
      @switch="switchTab"
    ></connect-switch>

    <connect-new
      v-if="tab === 'new' && !inputting"
      :connectors="connectors"
      @select="selectConnector"
    ></connect-new>

    <connect-known
      v-if="tab === 'known' && !inputting"
      :knowns="knowns"
      :launcher-builder="knownsLauncherBuilder"
      @select="selectKnown"
      @remove="removeKnown"
    ></connect-known>

    <div id="connect-warning">
      <span id="connect-warning-icon" class="icon icon-warning1"></span>
      <div id="connect-warning-msg">
        <p>
          <strong>An insecured service may steal your secrects.</strong>
          Always exam the safty of the service before using it.
        </p>

        <p>
          Sshwifty is a free software, you can deploy it on your own trusted
          infrastructure.
          <a href="https://github.com/niruix/sshwifty" target="_blank"
            >Learn more</a
          >
        </p>
      </div>
    </div>

    <div v-if="busy" id="connect-busy-overlay"></div>
  </window>
</template>

<script>
import "./connect.css";

import Window from "./window.vue";
import ConnectSwitch from "./connect_switch.vue";
import ConnectKnown from "./connect_known.vue";
import ConnectNew from "./connect_new.vue";

export default {
  components: {
    window: Window,
    "connect-switch": ConnectSwitch,
    "connect-known": ConnectKnown,
    "connect-new": ConnectNew
  },
  props: {
    display: {
      type: Boolean,
      default: false
    },
    inputting: {
      type: Boolean,
      default: false
    },
    knowns: {
      type: Array,
      default: () => []
    },
    knownsLauncherBuilder: {
      type: Function,
      default: () => []
    },
    connectors: {
      type: Array,
      default: () => []
    },
    busy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tab: "new",
      canSelect: true
    };
  },
  methods: {
    switchTab(to) {
      if (this.inputting) {
        return;
      }

      this.tab = to;
    },
    selectConnector(connector) {
      if (this.inputting) {
        return;
      }

      this.$emit("connector-select", connector);
    },
    selectKnown(known) {
      if (this.inputting) {
        return;
      }

      this.$emit("known-select", known);
    },
    removeKnown(uid) {
      if (this.inputting) {
        return;
      }

      this.$emit("known-remove", uid);
    }
  }
};
</script>
