import { JsonObject } from '@win2win/shared';
import { api } from 'src/boot/axios';
import { useLayoutConfigStore } from 'src/store/useLayoutConfigStore';
import { computed, onMounted, ref, watch } from 'vue';
import { useRequestConfirmation } from './useRequestConfirmation';
import { useRunAsyncTask } from './useRunAsyncTask';

export function useLayoutConfig(config?: { isRoot?: boolean }) {
  const loading = ref(false);
  const layoutStore = useLayoutConfigStore();
  const configExists = computed(() => layoutStore.configExists);

  const refetchConfig = async () => {
    loading.value = true;
    await api
      .get('/public/layout_config')
      .then(({ data }) => {
        if (data) {
          layoutStore.setConfig(data);
        }
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const applyStyles = (styles: string[]) => {
    const custom_styles = document.getElementById('custom_styles');
    if (!custom_styles) return;
    const stylesAsText = styles.map((style) => style.trim()).join('\n\r');
    custom_styles.textContent = stylesAsText;
  };

  watch(
    () => layoutStore.stylesConfig,
    async (styles) => {
      if (config?.isRoot && !!styles?.length) {
        applyStyles(styles);
      }
    },
    { immediate: true }
  );

  onMounted(async () => {
    if (config?.isRoot) {
      await refetchConfig();
    }
  });

  const { requestConfirmation } = useRequestConfirmation();
  const saving = ref(false);
  const runTask = useRunAsyncTask(saving);

  const saveConfigSection = (section: string, data: JsonObject | JsonObject[]) => {
    requestConfirmation({
      title: 'Guardar configuración',
      message: '¿Estás seguro que quieres guardar esta configuración?',
      action: () => {
        runTask(() => api.post(`admin/layout_config/${section}`, data).then(({ data }) => layoutStore.setConfig(data)), {
          successMessage: 'Configuración guardada correctamente',
          errorMessage: 'Error al guardar la configuración',
        });
      },
    });
  };

  const loginConfig = computed(() => layoutStore.loginConfig);
  const menuConfig = computed(() => layoutStore.menuConfig);
  const homeConfig = computed(() => layoutStore.homeConfig);
  const toolbarConfig = computed(() => layoutStore.toolbarConfig);
  const footerConfig = computed(() => layoutStore.footerConfig);
  const stylesConfig = computed(() => layoutStore.stylesConfig);

  return {
    refetchConfig,
    loginConfig,
    menuConfig,
    homeConfig,
    toolbarConfig,
    loading,
    configExists,
    footerConfig,
    stylesConfig,
    saving,
    saveConfigSection,
  };
}