import Vue from 'vue';
import VueApollo from 'vue-apollo';
import VueRouter from 'vue-router';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import EnvironmentsDetailHeader from './components/environments_detail_header.vue';
import { apolloProvider } from './graphql/client';
import environmentsMixin from './mixins/environments_mixin';

export const initHeader = () => {
  const el = document.getElementById('environments-detail-view-header');
  const container = document.getElementById('environments-detail-view');
  const dataset = convertObjectPropsToCamelCase(JSON.parse(container.dataset.details));

  return new Vue({
    el,
    mixins: [environmentsMixin],
    data() {
      const environment = {
        name: dataset.name,
        id: Number(dataset.id),
        externalUrl: dataset.externalUrl,
        isAvailable: dataset.isEnvironmentAvailable,
        hasTerminals: dataset.hasTerminals,
        autoStopAt: dataset.autoStopAt,
        onSingleEnvironmentPage: true,
        // TODO: These two props are snake_case because the environments_mixin file uses
        // them and the mixin is imported in several files. It would be nice to conver them to camelCase.
        stop_path: dataset.environmentStopPath,
        delete_path: dataset.environmentDeletePath,
      };

      return {
        environment,
      };
    },
    render(createElement) {
      return createElement(EnvironmentsDetailHeader, {
        props: {
          environment: this.environment,
          canDestroyEnvironment: dataset.canDestroyEnvironment,
          canUpdateEnvironment: dataset.canUpdateEnvironment,
          canStopEnvironment: dataset.canStopEnvironment,
          canAdminEnvironment: dataset.canAdminEnvironment,
          cancelAutoStopPath: dataset.environmentCancelAutoStopPath,
          terminalPath: dataset.environmentTerminalPath,
          metricsPath: dataset.environmentMetricsPath,
          updatePath: dataset.environmentEditPath,
        },
      });
    },
  });
};

export const initPage = async () => {
  if (!gon.features.environmentDetailsVue) {
    return null;
  }
  const EnvironmentsDetailPageModule = await import('./environment_details/index.vue');
  const EnvironmentsDetailPage = EnvironmentsDetailPageModule.default;
  const dataElement = document.getElementById('environments-detail-view');
  const dataSet = convertObjectPropsToCamelCase(JSON.parse(dataElement.dataset.details));

  Vue.use(VueApollo);
  Vue.use(VueRouter);
  const el = document.getElementById('environment_details_page');

  const router = new VueRouter({
    mode: 'history',
    base: window.location.pathname,
    routes: [
      {
        path: '/',
        name: 'environment_details',
        component: EnvironmentsDetailPage,
        props: (route) => ({
          after: route.query.after,
          before: route.query.before,
          projectFullPath: dataSet.projectFullPath,
          environmentName: dataSet.name,
        }),
      },
    ],
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      }
      return { top: 0 };
    },
  });

  return new Vue({
    el,
    apolloProvider: apolloProvider(),
    router,
    provide: {},
    render(createElement) {
      return createElement('router-view');
    },
  });
};