<script>
import Layout from '@layouts/main.vue'
import axios from 'axios'
import { mapGetters, mapState } from 'vuex'
import store from '@state/store'

export default {
  components: { Layout },
  page: {
    title: 'First Setup',
  },
  data: function() {
    return {
      migrationMode: '',
      url: '',
      testSuccess: false,
      connectionError: '',
      isWorking: false,
      registerModel: {
        name: '',
        email: '',
        password: '',
        distanceUnit: 1,
        currency: 'INR',
      },
    }
  },
  computed: {
    ...mapGetters('auth', ['isInitialized']),
    ...mapState('vehicles', ['currencyMasters', 'distanceUnitMasters']),
  },
  mounted() {
    store.dispatch('vehicles/fetchMasters').then((data) => {})
  },
  methods: {
    resetMigrationMode() {
      this.migrationMode = ''
      this.url = ''
      this.registerModel = {
        name: '',
        email: '',
        password: '',
        distanceUnit: 1,
        currency: 'INR',
      }
    },
    showSuccessModal() {
      var message = ''
      if (this.migrationMode === 'clarkson') {
        message =
          'We have successfully migrated the data from Clarkson. You will be redirected to the login screen shortly where you can login using your existing email and password : hammond'
      }
      if (this.migrationMode === 'fresh') {
        message =
          'You have been registered successfully. You will be redirected to the login screen shortly where you can login and start using the system.'
      }
      this.$buefy.toast.open({
        duration: 10000,
        message: message,
        position: 'is-bottom',
        type: 'is-success',
      })
      setTimeout(() => {
        this.$router
          .push({ name: 'login' })
          .then((succ) => {})
          .catch((err) => console.log('error:', err))
      }, 10000)
    },
    register() {
      this.isWorking = true
      axios
        .post('/api/auth/initialize', this.registerModel)
        .then((response) => {
          const success = response.data.success
          if (success) {
            store.dispatch('auth/systemInitialized').then((data) => {
              this.showSuccessModal()
            })
          }
        })
        .catch((ex) => {
          this.testSuccess = false
          this.$buefy.toast.open({
            duration: 5000,
            message: ex.message,
            position: 'is-bottom',
            type: 'is-danger',
          })
        })
        .finally(() => (this.isWorking = false))
    },
    testConnection() {
      if (!this.url) {
        return
      }
      this.isWorking = true
      axios
        .post('/api/clarkson/check', { url: this.url })
        .then((response) => {
          this.testSuccess = response.data.canMigrate
          if (!this.testSuccess) {
            this.connectionError = response.data.message
          } else {
            this.connectionError = ''
          }
        })
        .catch((ex) => {
          this.testSuccess = false
          this.$buefy.toast.open({
            duration: 5000,
            message: ex.message,
            position: 'is-bottom',
            type: 'is-danger',
          })
        })
        .finally(() => (this.isWorking = false))
    },
    migrate() {
      if (!this.url) {
        return
      }
      this.isWorking = true
      axios
        .post('/api/clarkson/migrate', { url: this.url })
        .then((data) => {
          store.dispatch('auth/systemInitialized').then((data) => {
            this.showSuccessModal()
          })
        })
        .catch((ex) => {
          this.testSuccess = false
          this.$buefy.toast.open({
            duration: 5000,
            message: ex.message,
            position: 'is-bottom',
            type: 'is-danger',
          })
        })
        .finally(() => (this.isWorking = false))
    },
  },
}
</script>

<template>
  <Layout>
    <div v-if="!migrationMode" class="box">
      <h1 class="title">Migrate from Clarkson</h1>
      <p>
        If you have an existing Clarkson deployment and you want to migrate your data from that,
        press the following button.
      </p>
      <br />
      <b-field>
        <b-button type="is-primary" @click="migrationMode = 'clarkson'"
          >Migrate from Clarkson</b-button
        ></b-field
      >
    </div>
    <div v-if="!migrationMode" class="box">
      <h1 class="title">Fresh Install</h1>
      <p>
        If you want a fresh install of Hammond, press the following button.
      </p>
      <br />
      <b-field>
        <b-button type="is-primary" @click="migrationMode = 'fresh'">Fresh Install</b-button>
      </b-field>
    </div>
    <div v-if="migrationMode === 'clarkson'" class="box content">
      <h1 class="title">Migrate from Clarkson</h1>
      <p
        >You need to make sure that this deployment of Hammond can access the MySQL database used by
        Clarkson.</p
      >
      <p
        >If that is not directly possible, you can make a copy of that database somewhere accessible
        from this instance.</p
      >
      <p
        >Once that is done, enter the connection string to the MySQL instance in the following
        format.</p
      >
      <p
        >All the users imported from Clarkson will have their username as their email in Clarkson
        database and pasword set to <span class="" style="font-weight:bold">hammond</span></p
      >
      <code>
        user:pass@tcp(127.0.0.1:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local
      </code>
      <br />
      <br />
      <b-notification v-if="connectionError" type="is-danger" role="alert" :closable="false">
        {{ connectionError }}
      </b-notification>

      <b-field addons label="Mysql Connection String">
        <b-input v-model="url" required></b-input>
      </b-field>

      <div class="buttons">
        <b-button
          v-if="!testSuccess"
          type="is-primary"
          :disabled="isWorking"
          @click="testConnection"
          >Test Connection</b-button
        ><b-button v-if="testSuccess" type="is-success" :disabled="isWorking" @click="migrate"
          >Migrate</b-button
        >
        <b-button type="is-danger is-light" @click="resetMigrationMode">Cancel</b-button>
      </div>
    </div>
    <div v-if="migrationMode === 'fresh'" class="box content">
      <h1 class="title">Setup Admin Users</h1>
      <form @submit.prevent="register">
        <b-field label="Your Name">
          <b-input v-model="registerModel.name" required></b-input>
        </b-field>
        <b-field label="Your Email">
          <b-input v-model="registerModel.email" type="email" required></b-input>
        </b-field>
        <b-field label="Your Password">
          <b-input
            v-model="registerModel.password"
            type="password"
            required
            minlength="8"
            password-reveal
          ></b-input>
        </b-field>
        <b-field label="Currency">
          <b-select v-model="registerModel.currency" placeholder="Currency" required expanded>
            <option v-for="option in currencyMasters" :key="option.code" :value="option.code">
              {{ `${option.namePlural} (${option.code})` }}
            </option>
          </b-select>
        </b-field>
        <b-field label="Distance Unit">
          <b-select
            v-model.number="registerModel.distanceUnit"
            placeholder="Distance Unit"
            required
            expanded
          >
            <option v-for="(option, key) in distanceUnitMasters" :key="key" :value="key">
              {{ `${option.long} (${option.short})` }}
            </option>
          </b-select>
        </b-field>
        <br />
        <div class="buttons">
          <b-button type="is-primary" native-type="submit" tag="input"></b-button>

          <b-button type="is-danger is-light" @click="resetMigrationMode">Cancel</b-button>
        </div>
      </form>
    </div>
  </Layout>
</template>
