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

const commonColors = [
  '#000000', '#343a40', '#495057', '#6c757d', '#adb5bd', '#ced4da', '#dee2e6', '#e9ecef', '#f8f9fa', '#ffffff',
  '#c92a2a', '#a61e4d', '#862e9c', '#5f3dc4', '#364fc7', '#1864ab', '#0b7285', '#087f5b', '#2b8a3e', '#5c940d',
  '#e67700', '#d9480f'
]

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>
<!-- Bubble Menu for Inline Formatting -->
<bubble-menu 
    v-if="editor" 
    :editor="editor"
    :tippy-options="{ duration: 100, placement: 'bottom' }"
    class="z-50 bg-white border border-gray-200 rounded-lg shadow-lg p-2 flex space-x-2 flex-wrap"
>
    <div class="flex items-center space-x-1 p-1">
    <!-- Text Formatting Buttons -->
    <button 
        @click="editor.chain().focus().toggleBold().run()" 
        class="p-1.5 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-200': editor.isActive('bold') }"
        title="Bold"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 12h8a4 4 0 0 0 0-8H6v8z"></path>
        <path d="M6 12h9a4 4 0 0 1 0 8H6v-8z"></path>
        </svg>
    </button>

    <button 
        @click="editor.chain().focus().toggleItalic().run()" 
        class="p-1.5 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-200': editor.isActive('italic') }"
        title="Italic"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="19" y1="4" x2="10" y2="4"></line>
        <line x1="14" y1="20" x2="5" y2="20"></line>
        <line x1="15" y1="4" x2="9" y2="20"></line>
        </svg>
    </button>

    <button 
        @click="editor.chain().focus().toggleUnderline().run()" 
        class="p-1.5 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-200': editor.isActive('underline') }"
        title="Underline"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4v6a6 6 0 0 0 6 6 6 6 0 0 0 6-6V4"></path>
        <line x1="4" y1="20" x2="20" y2="20"></line>
        </svg>
    </button>

    <button 
        @click="editor.chain().focus().toggleStrike().run()" 
        class="p-1.5 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-200': editor.isActive('strike') }"
        title="Strikethrough"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="5" y1="12" x2="19" y2="12"></line>
        <path d="M16 6l-4 4-4-4"></path>
        <path d="M8 18l4-4 4 4"></path>
        </svg>
    </button>

    <button 
        @click="editor.chain().focus().toggleHighlight().run()" 
        class="p-1.5 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-200': editor.isActive('highlight') }"
        title="Highlight"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="4" y="4" width="16" height="16" rx="2"></rect>
        <rect x="9" y="9" width="6" height="6" fill="currentColor"></rect>
        </svg>
    </button>

    <div class="h-5 w-px bg-gray-300 mx-1"></div>

    <!-- Link Buttons -->
    <button 
        v-if="!editor.isActive('link')"
        @click="setLink" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Add Link"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
        </svg>
    </button>

    <div v-if="editor.isActive('link')" class="flex space-x-1">
        <button 
        @click="setLink" 
        class="p-1.5 rounded hover:bg-gray-100 bg-gray-200"
        title="Edit Link"
        >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
        </svg>
        </button>
        <button 
        @click="removeLink" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Remove Link"
        >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
            <line x1="2" y1="2" x2="22" y2="22"></line>
        </svg>
        </button>
    </div>

    <div class="h-5 w-px bg-gray-300 mx-1"></div>

    <!-- Color Dropdown -->
    <div class="relative group">
        <button 
        class="p-1.5 rounded hover:bg-gray-100 flex items-center"
        title="Text Color"
        >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L18 11H6L12 2Z" fill="currentColor"></path>
            <line x1="5" y1="19" x2="19" y2="19"></line>
        </svg>
        </button>
        <div class="absolute hidden group-hover:grid grid-cols-6 gap-1 p-2 bg-white rounded-lg shadow-lg border border-gray-200 z-50 w-48 top-full left-0 mt-1">
        <button 
            v-for="color in commonColors" 
            :key="color"
            @click="setColor(color)"
            class="w-6 h-6 rounded-full border border-gray-300"
            :style="{ backgroundColor: color }"
            :title="color"
        ></button>
        </div>
    </div>

    <div class="h-5 w-px bg-gray-300 mx-1"></div>

    <!-- Clear formatting -->
    <button 
        @click="editor.chain().focus().unsetAllMarks().run()" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Clear Formatting"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 19l-7-7 7-7"></path>
        <path d="M19 19V5"></path>
        </svg>
    </button>
    </div>

    <!-- Show table menu if table is active -->
    <div v-if="isTableActive()" class="flex items-center space-x-1 border-l border-gray-300 pl-2">
    <button 
        @click="addColumnBefore" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Add Column Before"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <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 12h6"></path>
        <path d="M9 9v6"></path>
        </svg>
    </button>
    
    <button 
        @click="addColumnAfter" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Add Column After"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
        <line x1="15" y1="3" x2="15" y2="21"></line>
        <path d="M12 12h6"></path>
        <path d="M15 9v6"></path>
        </svg>
    </button>
    
    <button 
        @click="addRowBefore" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Add Row Before"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
        <line x1="3" y1="9" x2="21" y2="9"></line>
        <path d="M12 6v6"></path>
        <path d="M9 9h6"></path>
        </svg>
    </button>
    
    <button 
        @click="addRowAfter" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Add Row After"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
        <line x1="3" y1="15" x2="21" y2="15"></line>
        <path d="M12 12v6"></path>
        <path d="M9 15h6"></path>
        </svg>
    </button>
    
    <div class="h-5 w-px bg-gray-300 mx-1"></div>
    
    <button 
        @click="deleteRow" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Delete Row"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
        <line x1="3" y1="9" x2="21" y2="9"></line>
        <line x1="9" y1="15" x2="15" y2="15"></line>
        </svg>
    </button>
    
    <button 
        @click="deleteColumn" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Delete Column"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <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="9" x2="15" y2="15"></line>
        </svg>
    </button>
    
    <button 
        @click="mergeCells" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Merge Cells"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
        <path d="M9 3v18"></path>
        <path d="M15 3v18"></path>
        <path d="M3 9h18"></path>
        <path d="M3 15h18"></path>
        <rect x="9" y="9" width="6" height="6" fill="currentColor" opacity="0.2"></rect>
        </svg>
    </button>
    
    <button 
        @click="splitCell" 
        class="p-1.5 rounded hover:bg-gray-100"
        title="Split Cell"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="3" y="3" width="18" height="18" rx="2"></rect>
        <path d="M12 3v18"></path>
        <path d="M3 12h18"></path>
        </svg>
    </button>
    </div>
</bubble-menu>
</template>