<template>
	<create-edit
		:title="$t('project.edit.header')"
		primary-icon=""
		:primary-label="$t('misc.save')"
		@primary="save"
		:tertiary="$t('misc.delete')"
		@tertiary="$router.push({ name: 'project.settings.delete', params: { id: projectId } })"
	>
		<div class="field">
			<label class="label" for="title">{{ $t('project.title') }}</label>
			<div class="control">
				<input
					:class="{ 'disabled': isLoading}"
					:disabled="isLoading || undefined"
					@keyup.enter="save"
					class="input"
					id="title"
					:placeholder="$t('project.edit.titlePlaceholder')"
					type="text"
					v-focus
					v-model="project.title"/>
			</div>
		</div>
		<div class="field">
			<label
				class="label"
				for="identifier"
				v-tooltip="$t('project.edit.identifierTooltip')">
				{{ $t('project.edit.identifier') }}
			</label>
			<div class="control">
				<input
					:class="{ 'disabled': isLoading}"
					:disabled="isLoading || undefined"
					@keyup.enter="save"
					class="input"
					id="identifier"
					:placeholder="$t('project.edit.identifierPlaceholder')"
					type="text"
					v-focus
					v-model="project.identifier"/>
			</div>
		</div>
		<div class="field">
			<label class="label" for="projectdescription">{{ $t('project.edit.description') }}</label>
			<div class="control">
				<Editor
					:class="{ 'disabled': isLoading}"
					:disabled="isLoading"
					:previewIsDefault="false"
					id="projectdescription"
					:placeholder="$t('project.edit.descriptionPlaceholder')"
					v-model="project.description"
				/>
			</div>
		</div>
		<div class="field">
			<label class="label">{{ $t('project.edit.color') }}</label>
			<div class="control">
				<color-picker v-model="project.hexColor"/>
			</div>
		</div>

	</create-edit>
</template>

<script lang="ts">
export default { name: 'project-setting-edit' }
</script>

<script setup lang="ts">
import type {PropType} from 'vue'
import {useRouter} from 'vue-router'
import {useI18n} from 'vue-i18n'

import Editor from '@/components/input/AsyncEditor'
import ColorPicker from '@/components/input/ColorPicker.vue'
import CreateEdit from '@/components/misc/create-edit.vue'

import type {IProject} from '@/modelTypes/IProject'

import {useBaseStore} from '@/stores/base'
import {useProject} from '@/stores/projects'

import {useTitle} from '@/composables/useTitle'

const props = defineProps({
	projectId: {
		type: Number as PropType<IProject['id']>,
		required: true,
	},
})

const router = useRouter()

const {t} = useI18n({useScope: 'global'})

const {project, save: saveProject, isLoading} = useProject(props.projectId)

useTitle(() => project?.title ? t('project.edit.title', {project: project.title}) : '')

async function save() {
	await saveProject()
	await useBaseStore().handleSetCurrentProject({project})
	router.back()
}
</script>
