import { JsonObject } from '@win2win/shared';
import { useQuasar } from 'quasar';
import { useWidgetStore } from 'src/composables/useWidgetStore';
import { ArchivoLite } from 'src/models';
import { ref } from 'vue';
import ContactDocumentDialog from '../ContactDocumentDialog.vue';
import { ArchivosMapper } from './ArchivosMapper';

export type ItemWithDocuments = { [key: string]: any; archivos?: ArchivoLite[] };

export function useDocuments(collection?: 'ingresos' | 'deudas' | 'garantias') {
  const currentShowingDocuments = ref<Set<number>>(new Set());
  const toggleShowingDocuments = (id: number) => {
    currentShowingDocuments.value.has(id) ? currentShowingDocuments.value.delete(id) : currentShowingDocuments.value.add(id);
  };
  const isShowingDocuments = (id: number) => currentShowingDocuments.value.has(id);
  const getDocuments = (items?: ItemWithDocuments[]) => items?.flatMap(({ archivos }) => archivos || []) || [];
  const mapArchivos = (archivos: ArchivoLite[]) => ArchivosMapper.toRaw(archivos);
  const formatDocuments = (items: ItemWithDocuments[]) => mapArchivos(getDocuments(items));

  const { dialog } = useQuasar();
  const { getPropsFromStore } = useWidgetStore();
  const showUploadDocumentDialog = ({ document, file }, props: JsonObject, callback?: () => void) => {
    dialog({
      component: ContactDocumentDialog,
      componentProps: {
        ...getPropsFromStore(props),
        collection,
        document,
        file,
      },
    }).onOk(() => (callback ? callback() : ''));
  };

  return { getDocuments, formatDocuments, toggleShowingDocuments, isShowingDocuments, showUploadDocumentDialog, mapArchivos };
}