import { useQueryClient } from '@tanstack/vue-query';
import { useFetch } from '@win2win/shared-ui';
import { isEqual } from 'lodash';
import { useQuasar } from 'quasar';
import { api } from 'src/boot/axios';
import { computed, Ref, watch } from 'vue';
import ColumnsDialog from './ColumnsDialog.vue';
import { ColumnsConfig } from './W2WToolbarConfig';

export function useColumns(columnsConfig: Ref<ColumnsConfig | undefined>, layoutCode: string, model: Ref<string[]>) {
  const queryKey = ['settings', layoutCode, 'columnas_visibles'];
  const { dialog } = useQuasar();
  const columns = computed(() => columnsConfig.value?.columns || []);

  const columnsModel = computed(() => {
    return columns.value.map((c) => ({
      name: c.name,
      label: c.label,
      visible: model.value.includes(c.name),
    }));
  });

  const defaultVisibleColumns = computed(() => columns.value.map((c) => c.name));

  const queryClient = useQueryClient();
  const persistsColumns = (columns: string[]) => {
    if (!columnsConfig.value?.persists) return;
    if (isEqual(columns, model.value)) return;
    const payload = {
      CODIGO: layoutCode,
      CONTENT: columns,
      TIPO: 'columnas_visibles',
    };
    api.post(`/user_settings`, payload).then(() => {
      queryClient.invalidateQueries({ queryKey });
    });
  };

  const editColumns = () =>
    dialog({
      component: ColumnsDialog,
      componentProps: {
        columns: columnsModel.value,
        layoutCode,
      },
    }).onOk((columns: string[]) => {
      model.value = columns;
      persistsColumns(columns);
    });

  const { data } = useFetch(queryKey, `user_settings/${layoutCode}/columnas_visibles`);
  watch(
    data,
    (value) => {
      model.value = (value as string[]) || defaultVisibleColumns.value;
    },
    { immediate: true }
  );

  return { editColumns, visibleColumns: model };
}

export interface ColumnModel {
  name: string;
  label: string;
  visible: boolean;
}