<template>
	<Head>
		<Title>d[any] - Configuration du projet</Title>
	</Head>
	<div class="flex flex-1 flex-row gap-4 p-6 items-start" v-if="navigation">
		<div class="flex flex-1 flex-col w-[450px] max-h-full">
			<DraggableTree class="list-none select-none border border-light-35 dark:border-dark-35 text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto" 
			:items="navigation ?? undefined" :get-key="(item: Partial<ProjectItem>) => item.path ? getPath(item as ProjectItem) : ''" @updateTree="drop">
				<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver, item }">
					<div class="flex flex-1 px-2" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
						<span class="py-2 px-2" @click="handleToggle" v-if="item.hasChildren" >
							<Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
						</span>
						<div class="ps-2 py-1 flex-1 truncate" :class="{'!ps-4 border-s border-light-35 dark:border-dark-35': !item.hasChildren}" :title="item.value.title" @click="() => { handleSelect();  selected = isSelected ? undefined : item.value; }">
							{{ item.value.title }}
						</div>
					</div>
				</template>
				<template #hint="{ instruction }">
					<div v-if="instruction" class="absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50" :style="{
							width: `calc(100% - ${instruction.currentLevel - 1}em)`
						}" :class="{
							'!border-b-4': instruction?.type === 'reorder-below',
							'!border-t-4': instruction?.type === 'reorder-above',
							'!border-4': instruction?.type === 'make-child',
						}"></div>
				</template>
			</DraggableTree>
		</div>
        <div class="flex flex-col flex-1">
            <div class="flex self-end gap-4 px-4">
				<Tooltip message="Ctrl+N" side="bottom"><Button @click="() => add()">Nouveau</Button></Tooltip>
				<Button @click="" v-if="selected" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer</Button>
                <Tooltip message="Ctrl+S" side="bottom"><Button @click="() => save(true)" :loading="saveStatus === 'pending'" class="border-light-blue dark:border-dark-blue hover:border-light-blue dark:hover:border-dark-blue focus:shadow-light-blue dark:focus:shadow-dark-blue">Enregistrer</Button></Tooltip>
                <Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink :href="{ name: 'explore' }"><Button>Annuler</Button></NuxtLink></Tooltip>
            </div>
            <div v-if="selected" class="flex-1 flex justify-start items-start">
                <div class="flex flex-col flex-1 justify-start items-start">
                    <input type="text" v-model="selected.title" placeholder="Titre" class="flex-1 mx-4 h-16 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
                    <span><pre class="ps-2 inline">{{ selected.parent }}/</pre><input v-model="selected.name" placeholder="Titre" class="font-mono border-b border-light-35 dark:border-dark-35 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none bg-transparent" /></span>
                    <div class="flex ms-6 flex-col justify-start items-start">
                        <Tooltip message="Consultable uniquement par le propriétaire" side="right"><Switch label="Privé" v-model="selected.private" /></Tooltip>
                        <Tooltip message="Afficher dans le menu de navigation" side="right"><Switch label="Navigable" v-model="selected.navigable" /></Tooltip>
                    </div>
                </div>
            </div>
        </div>
	</div>
</template>


<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
import { parsePath } from '#shared/general.utils';
import type { ProjectItem } from '~/schemas/project';
import type { FileType } from '~/schemas/file';

definePageMeta({
	rights: ['admin', 'editor'],
});

const router = useRouter();
const route = router.currentRoute;
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);

const toaster = useToast();
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');

const { data: project } = await useFetch(`/api/project`);
const navigation = computed<ProjectItem[] | undefined>({ 
    get: () => project.value?.items,
    set: (value) => {
        const proj = project.value;

        if(proj && value)
            proj.items = value;

        project.value = proj;
    }
});
const selected = ref<ProjectItem>();

useShortcuts({
    meta_s: { usingInput: true, handler: () => save(false) },
    meta_n: { usingInput: true, handler: () => add('markdown') },
    meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: path.value }}) }
})

const tree = {
  remove(data: ProjectItem[], id: string): ProjectItem[] {
	return data
	  .filter(item => getPath(item) !== id)
	  .map((item) => {
		if (tree.hasChildren(item)) {
		  return {
			...item,
			children: tree.remove(item.children ?? [], id),
		  };
		}
		return item;
	  });
  },
  insertBefore(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
	return data.flatMap((item) => {
	  if (getPath(item) === targetId)
		return [newItem, item];

	  if (tree.hasChildren(item)) {
		return {
		  ...item,
		  children: tree.insertBefore(item.children ?? [], targetId, newItem),
		};
	  }
	  return item;
	});
  },
  insertAfter(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
	return data.flatMap((item) => {
	  if (getPath(item) === targetId)
		return [item, newItem];

	  if (tree.hasChildren(item)) {
		return {
		  ...item,
		  children: tree.insertAfter(item.children ?? [], targetId, newItem),
		};
	  }

	  return item;
	});
  },
  insertChild(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
	return data.flatMap((item) => {
	  if (getPath(item) === targetId) {
		// already a parent: add as first child
		return {
		  ...item,
		  // opening item so you can see where item landed
		  isOpen: true,
		  children: [newItem, ...item.children ?? []],
		};
	  }

	  if (!tree.hasChildren(item))
		return item;

	  return {
		...item,
		children: tree.insertChild(item.children ?? [], targetId, newItem),
	  };
	});
  },
  find(data: ProjectItem[], itemId: string): ProjectItem | undefined {
	for (const item of data) {
	  if (getPath(item) === itemId)
		return item;

	  if (tree.hasChildren(item)) {
		const result = tree.find(item.children ?? [], itemId);
		if (result)
		  return result;
	  }
	}
  },
  getPathToItem({
	current,
	targetId,
	parentIds = [],
  }: {
	current: ProjectItem[]
	targetId: string
	parentIds?: string[]
  }): string[] | undefined {
	for (const item of current) {
	  if (getPath(item) === targetId)
		return parentIds;

	  const nested = tree.getPathToItem({
		current: (item.children ?? []),
		targetId,
		parentIds: [...parentIds, getPath(item)],
	  });
	  if (nested)
		return nested;
	}
  },
  hasChildren(item: ProjectItem): boolean {
	return (item.children ?? []).length > 0;
  },
}

function add(type: FileType): void
{
	if(!navigation.value)
	{
		return;
	}

	if(!selected.value)
	{
		navigation.value = [...navigation.value, {  }]
	}
	if(selected.value?.children)
	{
		tree.insertChild(selected.value)
	}
}
function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectItem[] | undefined {
	if(!navigation.value)
		return;

    const item = tree.find(navigation.value, itemId);
    const target = tree.find(navigation.value, targetId);

	if(!item)
		return;
	
	if (instruction.type === 'reparent') {
		const path = tree.getPathToItem({
			current: navigation.value,
			targetId: targetId,
		});
		if (!path) {
			console.error(`missing ${path}`);
			return;
		}

		const desiredId = path[instruction.desiredLevel];
		let result = tree.remove(navigation.value, itemId);
		result = tree.insertAfter(result, desiredId, item);
		return result;
	}

	// the rest of the actions require you to drop on something else
	if (itemId === targetId)
		return navigation.value;

	if (instruction.type === 'reorder-above') {
		let result = tree.remove(navigation.value, itemId);
		result = tree.insertBefore(result, targetId, item);
		return result;
	}

	if (instruction.type === 'reorder-below') {
		let result = tree.remove(navigation.value, itemId);
		result = tree.insertAfter(result, targetId, item);
		return result;
	}

	if (instruction.type === 'make-child') {
        if(!target || target.type !== 'folder')
            return;

		let result = tree.remove(navigation.value, itemId);
		result = tree.insertChild(result, targetId, item);
        rebuildPath([item], targetId);
		return result;
	}

  return navigation.value;
}

function drop(instruction: Instruction, itemId: string, targetId: string)
{
    navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
}
function rebuildPath(tree: ProjectItem[] | null | undefined, parentPath: string)
{
    debugger;
    if(!tree)
        return;

    tree.forEach(e => {
        e.parent = parentPath;
        rebuildPath(e.children, getPath(e));
    });
}
async function save(redirect: boolean): Promise<void>
{
	saveStatus.value = 'pending';
	try {
		await $fetch(`/api/project`, {
			method: 'post',
			body: project.value,
		});
		saveStatus.value = 'success';

		toaster.clear('error');
		toaster.add({
			type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
		});

		if(redirect) router.push({ name: 'explore-path', params: { path: path.value } });
	} catch(e: any) {
		toaster.add({
			type: 'error', content: e.message, timer: true, duration: 10000
		})
		saveStatus.value = 'error';
	}
}
function getPath(item: ProjectItem): string
{
    return [item.parent, parsePath(item?.name ?? item.title)].filter(e => !!e).join('/');
}
</script>