<script setup lang="ts">
import {ref} from 'vue';
import { useRouter } from 'vue-router';
import backendService from '@/services/BackendService'
import {IonButton, IonContent, IonCol, IonHeader, IonInput, IonPage, IonTitle, IonToolbar, IonCheckbox} from '@ionic/vue';

const server = ref(backendService.getServer());

const useSsl = ref(server.value.protocol === 'https' );
const router = useRouter();

const saveServerAddress = () => {
  server.value.protocol = useSsl.value ? 'https' : 'http';
  backendService.updateServer(server.value);
  router.push('/login');
};
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Setup Backend Server</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <ion-row>
        <ion-col class="ion-padding">
          <ion-input name="ipaddress" v-model="server.host" type="text" required placeholder="Enter server address"></ion-input>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-checkbox name="ssl" v-model="useSsl">Use SSL</ion-checkbox>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button type="button" fill="solid" expand="full" @click="saveServerAddress">Save</ion-button>
        </ion-col>
      </ion-row>
    </ion-content>
  </ion-page>
</template>

<style scoped>

</style>
