import { defineStore } from 'pinia';
import { ref, watch } from 'vue';

export const useMessageRenderStore = defineStore('messageRender', () => {
  // State - load from localStorage or use defaults
  const renderMarkdown = ref<boolean>(() => {
    const stored = localStorage.getItem('message-render-markdown');
    return stored ? JSON.parse(stored) : true;
  });

  const renderHTML = ref<boolean>(() => {
    const stored = localStorage.getItem('message-render-html');
    return stored ? JSON.parse(stored) : true;
  });

  const enableDynamicTables = ref<boolean>(() => {
    const stored = localStorage.getItem('message-render-tables');
    return stored ? JSON.parse(stored) : false;
  });

  const enableDrawing = ref<boolean>(() => {
    const stored = localStorage.getItem('message-render-drawing');
    return stored ? JSON.parse(stored) : false;
  });

  // Watch for changes and persist to localStorage
  watch(renderMarkdown, (value) => {
    localStorage.setItem('message-render-markdown', JSON.stringify(value));
  });

  watch(renderHTML, (value) => {
    localStorage.setItem('message-render-html', JSON.stringify(value));
  });

  watch(enableDynamicTables, (value) => {
    localStorage.setItem('message-render-tables', JSON.stringify(value));
  });

  watch(enableDrawing, (value) => {
    localStorage.setItem('message-render-drawing', JSON.stringify(value));
  });

  // Actions
  function toggleMarkdown() {
    renderMarkdown.value = !renderMarkdown.value;
  }

  function toggleHTML() {
    renderHTML.value = !renderHTML.value;
  }

  function toggleDynamicTables() {
    enableDynamicTables.value = !enableDynamicTables.value;
  }

  function toggleDrawing() {
    enableDrawing.value = !enableDrawing.value;
  }

  function resetAll() {
    renderMarkdown.value = true;
    renderHTML.value = true;
    enableDynamicTables.value = false;
    enableDrawing.value = false;
  }

  return {
    renderMarkdown,
    renderHTML,
    enableDynamicTables,
    enableDrawing,
    toggleMarkdown,
    toggleHTML,
    toggleDynamicTables,
    toggleDrawing,
    resetAll,
  };
});