<script setup>

import { ref, onMounted } from 'vue';
import { Button } from '@cloudron/pankow';
import { taskNameFromInstallationState } from '../../utils.js';
import { ISTATES } from '../../constants.js';
import AppsModel from '../../models/AppsModel.js';

const props = defineProps([ 'app' ]);

const appsModel = AppsModel.create();
const busyRepair = ref(false);
const busyRestart = ref(false);
const debugModeBusy = ref(false);

async function onToggleDebugMode() {
  const newValue = !props.app.debugMode;
  debugModeBusy.value = true;

  const data = newValue ? {
    readonlyRootfs: false,
    cmd: [ '/bin/bash', '-c', 'echo "Repair mode. Use the webterminal or cloudron exec to repair. Sleeping" && sleep infinity' ]
  } : null;

  const [error] = await appsModel.configure(props.app.id, 'debug_mode', { debugMode: data });
  if (error) {
    debugModeBusy.value = false;
    return console.error(error);
  }

  // let the task start
  setTimeout(() => { debugModeBusy.value = false; }, 4000);
}

async function onRepair() {
  busyRepair.value = true;

  const [error] = await appsModel.repair(props.app.id, {});
  if (error) {
    console.error(error);
    busyRepair.value = false;
    return;
  }

  setTimeout(() => { busyRepair.value = false; }, 4000);
}

async function onRestart() {
  busyRestart.value = true;

  const [error] = await appsModel.restart(props.app.id);
  if (error) console.error(error);

  busyRestart.value = false;
}

onMounted(() => {
});

</script>

<template>
  <div>
    <div>
      <label>{{ $t('app.repair.restart.title') }}</label>
      <div>{{ $t('app.repair.restart.description') }}</div>
      <br/>
      <Button @click="onRestart()" :disabled="!!(busyRestart || app.taskId || !!app.error)" :loading="busyRestart || app.installationState === 'pending_restart'">{{ $t('app.repair.recovery.restartAction') }}</Button>
    </div>
    <hr style="margin-top: 20px"/>

    <div>
      <label>{{ $t('app.repair.recovery.title') }}</label>
      <div v-html="$t('app.repair.recovery.description', { docsLink: 'https://docs.cloudron.io/apps/#recovery-mode' })"></div>
      <br/>
      <Button @click="onToggleDebugMode" :disabled="!!(debugModeBusy || (app.error && app.error.installationState !== ISTATES.PENDING_DEBUG) || app.taskId)">
        <span v-if="app.debugMode">{{ $t('app.repair.recovery.disableAction') }}</span>
          <span v-else>{{ $t('app.repair.recovery.enableAction') }}</span>
      </Button>
    </div>

    <hr style="margin-top: 20px"/>

    <div>
      <label>{{ $t('app.repair.taskError.title') }}</label>
      <div>{{ $t('app.repair.taskError.description') }}</div>
      <div v-if="app.error" style="margin-top: 10px;">An error occurred during the <b>{{ taskNameFromInstallationState(app.error.installationState) }}</b> operation: <span class="text-danger"><b>{{ app.error.reason + ': ' + app.error.message }}</b></span></div>
      <br/>
      <Button @click="onRepair()" :disabled="!!(busyRepair || app.taskId || !app.error)" :loading="busyRepair">{{ $t('app.repair.taskError.retryAction', { task: app.error ? taskNameFromInstallationState(app.error.installationState) : '' }) }}</Button>
    </div>
  </div>
</template>
