<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted } from 'vue';
import { Button, FormGroup } from '@cloudron/pankow';
import AppsModel from '../../models/AppsModel.js';

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

const appsModel = AppsModel.create();

function addCommonPattern(pattern) {
  crontab.value += pattern + ' /path/to/command\n';
}

const commonPatternsMenu = [
  { label: t('app.cron.commonPattern.everyMinute'),  action: () => addCommonPattern('*    *    *    *    *') },
  { label: t('app.cron.commonPattern.everyHour'),    action: () => addCommonPattern('0    *    *    *    *') },
  { label: t('app.cron.commonPattern.twicePerHour'), action: () => addCommonPattern('*/30 *    *    *    *') },
  { label: t('app.cron.commonPattern.everyDay'),     action: () => addCommonPattern('0    0    *    *    *') },
  { label: t('app.cron.commonPattern.twicePerDay'),  action: () => addCommonPattern('0    */12 *    *    *') },
  { label: t('app.cron.commonPattern.everySunday'),  action: () => addCommonPattern('0    0    *    *    0') },

  { label: t('app.cron.commonPattern.daily'),   action: () => addCommonPattern('@daily') },
  { label: t('app.cron.commonPattern.hourly'),  action: () => addCommonPattern('@hourly') },
  { label: t('app.cron.commonPattern.service'), action: () => addCommonPattern('@service') }
];

const crontabDefault = `# +------------------------ minute (0 - 59)
# |    +------------------- hour (0 - 23)
# |    |    +-------------- day of month (1 - 31)
# |    |    |    +--------- month (1 - 12)
# |    |    |    |    +---- day of week (0 - 6) (Sunday=0 or 7)
# |    |    |    |    |
# *    *    *    *    * command to be executed

`;

const busy = ref(false);
const crontab = ref('');
const submitError = ref({});

async function onSubmit() {
  if (crontab.value === crontabDefault && !props.app.crontab) return;
  if (crontab.value === props.app.crontab) return;

  submitError.value = {};
  busy.value = true;

  const [error] = await appsModel.configure(props.app.id, 'crontab', { crontab: crontab.value });
  if (error) submitError.value.generic = error.body?.message || JSON.stringify(error);

  busy.value = false;
}

onMounted(() => {
  crontab.value = props.app.crontab || crontabDefault;
});

</script>

<template>
  <div>
    <form @submit.prevent="onSubmit()" autocomplete="off">
      <fieldset :disabled="busy || app.error">
        <input style="display: none;" type="submit" />

        <FormGroup>
          <label for="crontabInput" style="display: flex; justify-content: space-between;">
            <span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
            <Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
          </label>
          <div description>{{ $t('app.cron.description') }}</div>
          <textarea id="crontabInput" style="width: 100%; white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
          <div class="error-label" v-show="submitError.generic">{{ submitError.generic }}</div>
        </FormGroup>
      </fieldset>
    </form>
    <br/>
    <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
  </div>
</template>
