import { DocumentLayout, Uuid } from '@win2win/shared';
import { useFetch } from '@win2win/shared-ui';
import { camelCase, mapKeys, pick } from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { DocumentLayoutRaw } from '../../models';

export function useDocumentLayout(id?: Uuid | string | null, context?: Record<string, any>) {
  if (!id) return { layout: ref(null), fetching: ref(false), data: ref(null), fetchingData: ref(false) };

  const { data: layoutRaw, fetching } = useFetch<DocumentLayoutRaw>(['documents_layouts', id], `documents_layouts/${id}`);
  const {
    data,
    fetching: fetchingData,
    refetch,
  } = useFetch<any>(
    ['documents_layouts', id, 'data'],
    `documents_layouts/${id}/data`,
    {
      context: {
        ...context,
      },
    },
    (value) => value ?? { global: {} }
  );

  const layout = computed<DocumentLayout | null>(() => {
    const _data = layoutRaw.value;
    if (!_data) return null;
    const data = pick(
      mapKeys(_data, (v, k) => camelCase(k)),
      ['context', 'name', 'description', 'format', 'asyncData', 'styles', 'code']
    );
    data['sections'] = _data.SECTIONS.map((section) => ({
      ...pick(
        mapKeys(section, (v, k) => camelCase(k)),
        ['idDocLaySection', 'type', 'styles', 'content', 'asyncData']
      ),
      id: section.ID_DOC_LAY_SECTION,
    }));
    return data as DocumentLayout;
  });

  onMounted(() => {
    refetch();
  });

  return { layout, fetching, data, fetchingData };
}