<template>
  <section class="page">
    <GnPageHeader title="Regular" kicker="Scripts">
      <template #actions>
        <GnBadge variant="primary">{{ scriptsStore.totalRegular }} scripts</GnBadge>
      </template>
    </GnPageHeader>

    <AppLoadingState v-if="scriptsStore.isLoadingRegular" text="Loading regular scripts" />

    <AppErrorState
      v-else-if="scriptsStore.errorRegular"
      title="Regular scripts loading failed"
      :message="scriptsStore.errorRegular.message"
      :retry="scriptsStore.loadRegular"
    />

    <AppEmptyState
      v-else-if="scriptsStore.regular.length === 0"
      title="No regular scripts"
      message="No regular scripts registered."
    />

    <div v-else class="devices-panel">
      <GnTable
        :columns="tableColumns"
        :rows="scriptsStore.regular"
        caption="Regular scripts"
      >
        <template #cell-alias="{ row }">
          <router-link
            :to="{ name: 'script-detail', params: { type: 'regular', id: row.alias } }"
            class="script-link"
          >
            {{ row.alias }}
          </router-link>
        </template>

        <template #cell-state="{ row }">
          <GnBadge :variant="row.state === 'enabled' ? 'success' : 'secondary'"
          >{{ row.state }}</GnBadge>
        </template>

        <template #cell-actions="{ row }">
          <GnButton
            v-if="row.state === 'enabled'"
            variant="secondary"
            icon="ph-pause"
            @click="toggle(row.alias, false)"
          >
            Disable
          </GnButton>
          <GnButton
            v-else
            variant="primary"
            icon="ph-play"
            @click="toggle(row.alias, true)"
          >
            Enable
          </GnButton>
        </template>
      </GnTable>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { useScriptsStore } from "../../../stores/scripts";
import { GnPageHeader, GnBadge, GnTable, GnButton } from "gnexus-ui-kit/vue";
import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
import AppErrorState from "../../../components/feedback/AppErrorState.vue";
import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";

const router = useRouter();
const scriptsStore = useScriptsStore();

const tableColumns = [
  { key: "alias", label: "Alias" },
  { key: "name", label: "Name" },
  { key: "state", label: "State" },
  { key: "filename", label: "File" },
  { key: "actions", label: "Actions" },
];

function goToDetail(alias) {
  router.push({ name: "script-detail", params: { type: "regular", id: alias } });
}

function toggle(alias, enabled) {
  scriptsStore.setRegularState(alias, enabled);
}

onMounted(() => {
  scriptsStore.loadRegular();
});
</script>

<style scoped>
.script-link {
  color: var(--color-primary);
}
</style>