import {createApp} from 'vue';
import RepoActionView from '../components/RepoActionView.vue';

export function initRepositoryActionView() {
  const el = document.querySelector('#repo-action-view');
  if (!el) return;
  const runId = parseInt(el.getAttribute('data-run-id')!);
  const jobId = parseInt(el.getAttribute('data-job-id')!);

  // TODO: the parent element's full height doesn't work well now,
  // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
  const parentFullHeight = document.querySelector<HTMLElement>('body > div.full.height');
  if (parentFullHeight) parentFullHeight.classList.add('tw-pb-0');

  const view = createApp(RepoActionView, {
    runId,
    jobId,
    actionsUrl: el.getAttribute('data-actions-url'),
    locale: {
      approve: el.getAttribute('data-locale-approve'),
      cancel: el.getAttribute('data-locale-cancel'),
      rerun: el.getAttribute('data-locale-rerun'),
      rerun_all: el.getAttribute('data-locale-rerun-all'),
      rerun_failed: el.getAttribute('data-locale-rerun-failed'),
      scheduled: el.getAttribute('data-locale-runs-scheduled'),
      commit: el.getAttribute('data-locale-runs-commit'),
      pushedBy: el.getAttribute('data-locale-runs-pushed-by'),
      workflowGraph: el.getAttribute('data-locale-runs-workflow-graph'),
      summary: el.getAttribute('data-locale-summary'),
      allJobs: el.getAttribute('data-locale-all-jobs'),
      triggeredVia: el.getAttribute('data-locale-triggered-via'),
      totalDuration: el.getAttribute('data-locale-total-duration'),
      artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
      areYouSure: el.getAttribute('data-locale-are-you-sure'),
      artifactExpired: el.getAttribute('data-locale-artifact-expired'),
      confirmDeleteArtifact: el.getAttribute('data-locale-confirm-delete-artifact'),
      showTimeStamps: el.getAttribute('data-locale-show-timestamps'),
      showLogSeconds: el.getAttribute('data-locale-show-log-seconds'),
      showFullScreen: el.getAttribute('data-locale-show-full-screen'),
      downloadLogs: el.getAttribute('data-locale-download-logs'),
      status: {
        unknown: el.getAttribute('data-locale-status-unknown'),
        waiting: el.getAttribute('data-locale-status-waiting'),
        running: el.getAttribute('data-locale-status-running'),
        success: el.getAttribute('data-locale-status-success'),
        failure: el.getAttribute('data-locale-status-failure'),
        cancelled: el.getAttribute('data-locale-status-cancelled'),
        skipped: el.getAttribute('data-locale-status-skipped'),
        blocked: el.getAttribute('data-locale-status-blocked'),
      },
      logsAlwaysAutoScroll: el.getAttribute('data-locale-logs-always-auto-scroll'),
      logsAlwaysExpandRunning: el.getAttribute('data-locale-logs-always-expand-running'),
      workflowFile: el.getAttribute('data-locale-workflow-file'),
      runDetails: el.getAttribute('data-locale-run-details'),
    },
  });
  view.mount(el);
}