<script setup>
import { reactive, ref } from 'vue';

const props = defineProps({
  editor: {
    type: Object,
    required: true,
  }
});
const editor = reactive(props.editor);

const textColor = ref(null);
const highColor = ref(null);
const color = ref("#000000");
const highlight = ref("#ffff00");
const setColor = (c) => {
  editor.chain().focus().setColor(c).run()
  editor.getAttributes("textStyle").color = c;
}

const setAlign = (alignment) => {
  if (editor.isActive('image')) {
    editor.chain()
      .updateAttributes('image', { alignment })
      .run()
  } 
  editor.chain()
    .setTextAlign(alignment)
    .run()
}
</script>

<template>
<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
  <button 
    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 1 }) }"
    title="Heading 1"
  >
    T1
  </button>
  
  <button 
    @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 2 }) }"
    title="Heading 2"
  >
    T2
  </button>
  
  <button 
    @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 3 }) }"
    title="Heading 3"
  >
    T3
  </button>

  <button 
    @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('heading', { level: 4 }) }"
    title="Heading 3"
  >
    T4
  </button>
  <button 
    @click="editor.chain().focus().setParagraph().run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('paragraph') }"
    title="Paragraph"
  >
    paragraphe
  </button>
  <button 
    @click="editor.chain().focus().toggleBold().run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('bold') }"
    title="Bold"
  >
    gras
  </button>

  <button 
    @click="editor.chain().focus().toggleItalic().run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('italic') }"
    title="Italic"
  >
    italic
  </button>

  <button 
    @click="editor.chain().focus().toggleUnderline().run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('underline') }"
    title="Underline"
  >
    sous-ligner
  </button>

  <button 
    @click="editor.chain().focus().toggleStrike().run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    :class="{ 'bg-gray-400': editor.isActive('strike') }"
    title="Strikethrough"
  >
    barrer
  </button>

  <div class="flex items-center justify-center">
    <button 
    @click="!editor.state.selection.empty ? editor.chain().focus().toggleHighlight({color: highlight}).run() : highColor.click()" 
    class="px-2 py-0.5 rounded-lg"
    :style="'background-color:'+highlight"
    title="Highlight"
    >sur-ligner</button>
    <input 
      type="color" 
      @input="(e) => highlight = e.target.value" 
      ref="highColor"
      class="w-8 h-8 p-0 border-none cursor-pointer hidden"
      title="Text Color"
    />
  </div>
  <div class="flex items-center space-x-1">
    <label 
    @click="!editor.state.selection.empty || editor.state.isFocused ? setColor(color) : textColor.click()"
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5" :style="'color: ' + color">couleur</label>
    <input 
      type="color" 
      @input="(e) => color = e.target.value" 
      ref="textColor"
      class="w-8 h-8 p-0 border-none cursor-pointer hidden"
      title="Text Color"
    />
  </div>

  <button 
    @click="editor.chain().focus().clearNodes().run()" 
    class="px-2 py-0.5 rounded-lg hover:bg-red-600 bg-red-500 my-0.5 text-white"
    title="Clear Formatting"
  >
    retirer tout format
  </button>

  <div class="border-l border-gray-300 h-6 mx-4"></div>

  <button 
        @click="setAlign('left')" 
        class="p-1 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'left' }) }"
        title="Align Left"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <line x1="17" y1="10" x2="3" y2="10"></line>
        <line x1="21" y1="6" x2="3" y2="6"></line>
        <line x1="21" y1="14" x2="3" y2="14"></line>
        <line x1="17" y1="18" x2="3" y2="18"></line>
        </svg>
    </button>
    
    <button 
        @click="setAlign('center')" 
        class="p-1 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'center' }) }"
        title="Align Center"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <line x1="18" y1="10" x2="6" y2="10"></line>
        <line x1="21" y1="6" x2="3" y2="6"></line>
        <line x1="21" y1="14" x2="3" y2="14"></line>
        <line x1="18" y1="18" x2="6" y2="18"></line>
        </svg>
    </button>
    
    <button 
        @click="setAlign('right')" 
        class="p-1 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'right' }) }"
        title="Align Right"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <line x1="21" y1="10" x2="7" y2="10"></line>
        <line x1="21" y1="6" x2="3" y2="6"></line>
        <line x1="21" y1="14" x2="3" y2="14"></line>
        <line x1="21" y1="18" x2="7" y2="18"></line>
        </svg>
    </button>
    
    <button 
        @click="setAlign('justify')" 
        class="p-1 rounded hover:bg-gray-100"
        :class="{ 'bg-gray-400': editor.isActive({ textAlign: 'justify' }) }"
        title="Justify"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <line x1="21" y1="10" x2="3" y2="10"></line>
        <line x1="21" y1="6" x2="3" y2="6"></line>
        <line x1="21" y1="14" x2="3" y2="14"></line>
        <line x1="21" y1="18" x2="3" y2="18"></line>
        </svg>
    </button>
</div>
</template>