import { useQuasar } from 'quasar';
import { api } from 'src/boot/axios';
import { notifyError } from 'src/helpers';
import { exportJsonToFile, importJsonFromFile } from 'src/helpers/file_handlers';
import { computed, ref } from 'vue';
import EstadoDialog from './estados/EstadoDialog.vue';
import FlagDialog from './estados/FlagDialog.vue';
import LayoutGroupDialog from './LayoutGroupDialog.vue';
import NewGamaForm from './NewGamaDialog.vue';
import NewGamaTagDialog from './NewGamaTagDialog.vue';
import PropDialog from './PropDialog.vue';
import ProposalDialog from './propuestas/ConfPropuestaDialog.vue';
import TemplateDialog from './TemplateDialog.vue';
import { useGama } from './useGama';

export function useGamaActions() {
  const { dialog } = useQuasar();
  const { gama, loading, refetchLayouts, refetch, idGama } = useGama();

  const editGama = () => dialog({ component: NewGamaForm, componentProps: { data: gama } });
  const addProp = () => dialog({ component: PropDialog });
  const addTemplate = () => dialog({ component: TemplateDialog });
  const addLayoutGroup = () => dialog({ component: LayoutGroupDialog }).onOk(() => refetchLayouts());
  const addTag = () => dialog({ component: NewGamaTagDialog });
  const addEstado = () => dialog({ component: EstadoDialog });
  const addFlag = () => dialog({ component: FlagDialog }).onOk(() => refetch(['flags']));
  const addPropuesta = () => dialog({ component: ProposalDialog }).onOk(() => refetch(['proposals']));

  const exportEstados = () => {
    loading.value = true;
    api
      .get('/estados/export', { params: { idGama: idGama.value } })
      .then(({ data }) => {
        exportJsonToFile(data, ('ESTADOS_GAMA_' + gama.value.NOMBRE).toUpperCase());
      })
      .catch(notifyError)
      .finally(() => (loading.value = false));
  };
  const importEstados = () => {
    importJsonFromFile((data) => {
      loading.value = true;
      api
        .post('/estados/import', { estados: data, idGama: idGama.value })
        .then(() => refetch(['estados']))
        .catch(notifyError)
        .finally(() => (loading.value = false));
    });
  };
  const exportFlags = () => {
    loading.value = true;
    api
      .get('/flags/export', { params: { idGama: idGama.value } })
      .then(({ data }) => {
        exportJsonToFile(data, ('FLAGS_GAMA_' + gama.value.NOMBRE).toUpperCase());
      })
      .catch(notifyError)
      .finally(() => (loading.value = false));
  };
  const importFlags = () => {
    importJsonFromFile((data) => {
      loading.value = true;
      api
        .post('/flags/import', { flags: data, idGama: idGama.value })
        .then(() => refetch(['flags']))
        .catch(notifyError)
        .finally(() => (loading.value = false));
    });
  };

  const tabs = [
    { icon: 'arrow_back', name: '_back:gamas' },
    { label: 'Información general', name: 'info' },
    { label: 'Props', name: 'props' },
    { label: 'Layouts', name: 'layout' },
    { label: 'Estados', name: 'estados' },
    { label: 'Flags', name: 'flags' },
    { label: 'Requerimientos', name: 'requires' },
    { label: 'Etiquetas', name: 'tags' },
    { label: 'Plantillas de documentos', name: 'templates' },
    { label: 'Contextos IA', name: 'ai_contexts' },
  ];
  const tab = ref<string>('info');

  const globalActions = computed(() => {
    return (
      ({
        info: [{ label: 'Editar información general', action: 'edit', fn: editGama }],
        props: [{ label: 'Agregar atributo dinámico', action: 'add', fn: addProp }],
        layout: [{ label: 'Agregar grupo de layouts', action: 'add', fn: addLayoutGroup }],
        tags: [{ label: 'Agregar etiqueta', action: 'add', fn: addTag }],
        proposals: [{ label: 'Agregar conf. propuesta', action: 'add', fn: addPropuesta }],
        templates: [{ label: 'Agregar plantilla', action: 'add', fn: addTemplate }],
        estados: [
          { label: 'Exportar estados', action: 'download', fn: exportEstados },
          { label: 'Importar estados', action: 'upload', fn: importEstados },
          { label: 'Agregar estado', action: 'add', fn: addEstado },
        ],
        flags: [
          { label: 'Exportar flags', action: 'download', fn: exportFlags },
          { label: 'Importar flags', action: 'upload', fn: importFlags },
          { label: 'Agregar flag', action: 'add', fn: addFlag },
        ],
      }[tab.value] as { label: string; action: 'edit' | 'add'; fn: () => void }[]) || null
    );
  });

  return { gama, tab, tabs, globalActions, loading, editGama, addProp, addTemplate, addLayoutGroup, addTag, addEstado, addFlag, addPropuesta };
}