<template>
	<create-edit
		:title="$t('list.create.header')"
		@create="createNewList()"
		:primary-disabled="list.title === ''"
	>
		<div class="field">
			<label class="label" for="listTitle">{{ $t('list.title') }}</label>
			<div
				:class="{ 'is-loading': isLoading }"
				class="control"
			>
				<input
					:class="{ disabled: isLoading }"
					@keyup.enter="createNewList()"
					@keyup.esc="$router.back()"
					class="input"
					:placeholder="$t('list.create.titlePlaceholder')"
					type="text"
					name="listTitle"
					v-focus
					v-model="list.title"
				/>
			</div>
		</div>
		<p class="help is-danger" v-if="errors.createList && list.title === ''">
			{{ $t('list.create.addTitleRequired') }}
		</p>
		<div class="field">
			<label class="label">{{ $t('list.color') }}</label>
			<div class="control">
				<color-picker v-model="list.hexColor" />
			</div>
		</div>
	</create-edit>
</template>

<script setup lang="ts">
import {watchEffect} from 'vue'
import {useI18n} from 'vue-i18n'

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

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

import {useTitle} from '@/composables/useTitle'
import {useList} from '@/stores/lists'

const {namespaceId} = defineProps<{
	namespaceId: INamespace['id']
}>()

const {t} = useI18n({useScope: 'global'})
useTitle(() => t('list.create.header'))

const {isLoading, errors, list, createList} = useList()

watchEffect(() => {
	list.value.namespaceId = namespaceId
})

const createNewList = () => createList()
</script>