<script setup>
import { reactive, ref } from 'vue';
const props = defineProps({
  editor: {
    type: Object,
    required: true,
  }
});
const editor = reactive(props.editor);

const addTable = () => {
  editor
    .chain()
    .focus()
    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
    .run()
}

const isTableActive = () => {
  return editor && (
    editor.isActive('table') ||
    editor.isActive('tableRow') ||
    editor.isActive('tableCell') ||
    editor.isActive('tableHeader')
  )
}

// Table operations
const addColumnBefore = () => {
  editor.chain().focus().addColumnBefore().run()
}

const addColumnAfter = () => {
  editor.chain().focus().addColumnAfter().run()
}

const deleteColumn = () => {
  editor.chain().focus().deleteColumn().run()
}

const addRowBefore = () => {
  editor.chain().focus().addRowBefore().run()
}

const addRowAfter = () => {
  editor.chain().focus().addRowAfter().run()
}

const deleteRow = () => {
  editor.chain().focus().deleteRow().run()
}

const deleteTable = () => {
  editor.chain().focus().deleteTable().run()
}

const toggleHeaderColumn = () => {
  editor.chain().focus().toggleHeaderColumn().run()
}

const toggleHeaderRow = () => {
  editor.chain().focus().toggleHeaderRow().run()
}

const mergeCells = () => {
  editor.chain().focus().mergeCells().run()
}

const splitCell = () => {
  editor.chain().focus().splitCell().run()
}
</script>

<template>
<!-- Tables Tab -->
<div class="flex items-center space-x-2 flex-wrap">
  <button 
    @click="addTable" 
    class="p-1 rounded hover:bg-gray-100 flex items-center"
    title="Insert Table"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <line x1="3" y1="9" x2="21" y2="9"></line>
      <line x1="3" y1="15" x2="21" y2="15"></line>
      <line x1="9" y1="3" x2="9" y2="21"></line>
      <line x1="15" y1="3" x2="15" y2="21"></line>
    </svg>
    <span class="ml-1 text-sm">New Table</span>
  </button>
  
  <div class="border-r border-gray-300 h-6 mx-1"></div>
  
  <button 
    @click="addColumnBefore" 
    class="p-1 rounded hover:bg-gray-100"
    title="Add Column Before"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="9" y1="3" x2="9" y2="21"></line>
      <line x1="6" y1="12" x2="12" y2="12"></line>
      <line x1="9" y1="9" x2="9" y2="15"></line>
    </svg>
  </button>
  
  <button 
    @click="addColumnAfter" 
    class="p-1 rounded hover:bg-gray-100"
    title="Add Column After"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="15" y1="3" x2="15" y2="21"></line>
      <line x1="12" y1="12" x2="18" y2="12"></line>
      <line x1="15" y1="9" x2="15" y2="15"></line>
    </svg>
  </button>
  
  <button 
    @click="deleteColumn" 
    class="p-1 rounded hover:bg-gray-100"
    title="Delete Column"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="15" y1="3" x2="15" y2="21"></line>
      <line x1="9" y1="3" x2="9" y2="21"></line>
      <line x1="12" y1="9" x2="12" y2="15"></line>
    </svg>
  </button>
  
  <div class="border-r border-gray-300 h-6 mx-1"></div>
  
  <button 
    @click="addRowBefore" 
    class="p-1 rounded hover:bg-gray-100"
    title="Add Row Before"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="3" y1="9" x2="21" y2="9"></line>
      <line x1="12" y1="6" x2="12" y2="12"></line>
      <line x1="9" y1="9" x2="15" y2="9"></line>
    </svg>
  </button>
  
  <button 
    @click="addRowAfter" 
    class="p-1 rounded hover:bg-gray-100"
    title="Add Row After"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="3" y1="15" x2="21" y2="15"></line>
      <line x1="12" y1="12" x2="12" y2="18"></line>
      <line x1="9" y1="15" x2="15" y2="15"></line>
    </svg>
  </button>
  
  <button 
    @click="deleteRow" 
    class="p-1 rounded hover:bg-gray-100"
    title="Delete Row"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="3" y1="15" x2="21" y2="15"></line>
      <line x1="3" y1="9" x2="21" y2="9"></line>
      <line x1="12" y1="12" x2="12" y2="12"></line>
    </svg>
  </button>
  
  <div class="border-r border-gray-300 h-6 mx-1"></div>
  
  <button 
    @click="toggleHeaderRow" 
    class="p-1 rounded hover:bg-gray-100"
    title="Toggle Header Row"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="3" y1="9" x2="21" y2="9"></line>
      <path d="M6 6h12"></path>
    </svg>
  </button>
  
  <button 
    @click="toggleHeaderColumn" 
    class="p-1 rounded hover:bg-gray-100"
    title="Toggle Header Column"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="9" y1="3" x2="9" y2="21"></line>
      <path d="M6 6v12"></path>
    </svg>
  </button>
  
  <div class="border-r border-gray-300 h-6 mx-1"></div>
  
  <button 
    @click="mergeCells" 
    class="p-1 rounded hover:bg-gray-100"
    title="Merge Cells"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="9" y1="3" x2="9" y2="21" stroke-dasharray="4"></line>
    </svg>
  </button>
  
  <button 
    @click="splitCell" 
    class="p-1 rounded hover:bg-gray-100"
    title="Split Cell"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="3" width="18" height="18" rx="2"></rect>
      <line x1="9" y1="3" x2="9" y2="21"></line>
      <line x1="15" y1="3" x2="15" y2="21"></line>
    </svg>
  </button>
  
  <div class="border-r border-gray-300 h-6 mx-1"></div>
  
  <button 
    @click="deleteTable" 
    class="p-1 rounded hover:bg-gray-100"
    title="Delete Table"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M3 6h18"></path>
      <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6"></path>
      <path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
      <line x1="10" y1="11" x2="10" y2="17"></line>
      <line x1="14" y1="11" x2="14" y2="17"></line>
    </svg>
  </button>
</div>
</template>