<script setup lang="ts">
import {ref, watchEffect, nextTick} from 'vue'
import Sidebar from './components/Sidebar.vue'
import MarkdownEditor from './components/MarkdownEditor.vue'

const STORAGE_KEY_CONFIG = 'jane-config'
const STORAGE_KEY_NOTES = 'jane-notes'

const configs = ref(JSON.parse(localStorage.getItem(STORAGE_KEY_CONFIG) || '[]'))
const notes = ref(JSON.parse(localStorage.getItem(STORAGE_KEY_NOTES) || '[]'))
const active_note = ref(null)

const input_title = ref('')
const input_content = ref('')

// find note Index by Id
function findNoteIndexById(id:any):any {
	return notes.value.findIndex((note:any) => note.id === id)
}

// create note
function create_note() {
	// generate random id
	const id = Math.random().toString(36).substring(2,9)
	// push new note to notes array
	notes.value.push({
		id,
		title: 'Untitled',
		content: ''
	})
	// set active note to id
	set_active_note(id)
}

// delete note
function delete_note({id, evt}:any) {
	// stop the propagation of the event
	evt.stopPropagation()
	// find the current note id in the notes array
	let noteId = findNoteIndexById(id)
	// delete the note out of the array
	notes.value.splice(noteId, 1)
	// unset the active note and the inputs
	active_note.value = null
	input_title.value = ''
	input_content.value = ''
}

// update note
function update_note() {
	// find the current note id in the notes array
	let noteId = findNoteIndexById(active_note.value)
	// set the note properties to the current input values
	notes.value[noteId].title = input_title.value
	notes.value[noteId].content = input_content.value
}

// update note content
function update_note_content({id, content}:any) {
	// find the current note id in the notes array
	let noteId = findNoteIndexById(id)
	// set the note properties to the current input values
	notes.value[noteId].content = content
	// update the ref object
	input_content.value = content
}

// set active note
function set_active_note(id:any) {
	// set the active note property
	active_note.value = id
	// find the current note in the notes array
	let noteId = findNoteIndexById(id)
	// set the input properties to the current note
	input_title.value = notes.value[noteId].title
	input_content.value = notes.value[noteId].content
	// wait a tick and focus the input field
	nextTick(() => { (document.querySelector('input#note-title') as HTMLInputElement)?.focus() })
}

// persist state
watchEffect(() => {
	// save the current array of notes
	localStorage.setItem(STORAGE_KEY_NOTES, JSON.stringify(notes.value))
	// save the current array of configurations
	localStorage.setItem(STORAGE_KEY_CONFIG, JSON.stringify(configs.value))
})

</script>

<template>
	<div class="bg-gray-700 text-white min-h-screen flex items-stretch justify-start">
		<!-- SIDEBAR -->
		<Sidebar
			:active_note="active_note"
			:notes="notes"
			@new-note="create_note"
			@delete-note="delete_note"
			@set-active-note="set_active_note"
		/>

		<!-- MAIN CONTENT -->
		<main class="flex-1">
			<div v-if="active_note" class="px-4 py-8 flex flex-col h-full">
				<input
					v-model="input_title"
					@input="update_note"
					type="text"
					name="note-title"
					id="note-title"
					class="block w-full text-3xl pb-2 font-bold border-b-2 border-gray-500 focus:border-white outline-none transition-colors duration-200"
				/>
				
				<MarkdownEditor
					:active_note="active_note"
					v-model="input_content"
					@update-note-content="update_note_content"
					name="note-content"
					id="note-content"
					class="block w-full h-full mt-4 text-lg flex-1"
				/>
			</div>
		</main>
	</div>
</template>
