<FormModal
	:id="id"
	title="Edit Type"
	dialog-class="fm-edit-type"
	:is-saving="isSaving"
	:is-modified="isModified"
	:is-create="isCreate"
	@submit="save"
	@hidden="clear"
	@show="initialize"
>
	<template v-if="type">
		<ValidationProvider name="Name" v-slot="v" rules="required">
			<b-form-group label="Name" :label-for="`${id}-name-input`" label-cols-sm="3" :state="v | validationState">
				<b-input :id="`${id}-name-input`" v-model="type.name" :state="v | validationState"></b-input>
				<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
			</b-form-group>
		</ValidationProvider>

		<ValidationProvider name="Type" v-slot="v" rules="required">
			<b-form-group label="Type" :label-for="`${id}-type-input`" label-cols-sm="3" :state="v | validationState">
				<b-form-select
					:id="`${id}-type-input`"
					v-model="type.type"
					:disabled="!isCreate"
					:options="[{ value: 'marker', text: 'Marker' }, { value: 'line', text: 'Line' }]"
					:state="v | validationState"
				></b-form-select>
				<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
			</b-form-group>
		</ValidationProvider>

		<template v-if="canControl.length > 0">
			<hr/>

			<p class="text-muted">
				These styles are applied when a new object of this type is created. If “Fixed” is enabled, the style is applied to all objects
				of this type and cannot be changed for an individual object anymore. For more complex style control, dropdown or checkbox fields
				can be configured below to change the style based on their selected value.
			</p>

			<ValidationProvider v-if="canControl.includes('colour')" name="Default colour" v-slot="v" :rules="type.colourFixed ? 'required|colour' : 'colour'">
				<b-form-group label="Default colour" :label-for="`${id}-default-color-input`" label-cols-sm="3" :state="v | validationState">
					<b-row align-v="center">
						<b-col><ColourField :id="`${id}-default-colour-input`" v-model="type.defaultColour" :state="v | validationState"></ColourField></b-col>
						<b-col sm="3"><b-checkbox v-model="type.colourFixed" @change="setTimeout(() => { v.validate(type.defaultColour); })">Fixed</b-checkbox></b-col>
					</b-row>
					<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
				</b-form-group>
			</ValidationProvider>

			<ValidationProvider v-if="canControl.includes('size')" name="Default size" v-slot="v" :rules="type.sizeFixed ? 'required|size' : 'size'">
				<b-form-group label="Default size" :label-for="`${id}-default-size-input`" label-cols-sm="3" :state="v | validationState">
					<b-row align-v="center">
						<b-col><SizeField :id="`${id}-default-size-input`" v-model="type.defaultSize" :state="v | validationState"></SizeField></b-col>
						<b-col sm="3"><b-checkbox v-model="type.sizeFixed" @change="setTimeout(() => { v.validate(type.defaultSize); })">Fixed</b-checkbox></b-col>
					</b-row>
					<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
				</b-form-group>
			</ValidationProvider>

			<ValidationProvider v-if="canControl.includes('symbol')" name="Default icon" v-slot="v" rules="symbol">
				<b-form-group label="Default icon" :label-for="`${id}-default-symbol-input`" label-cols-sm="3" :state="v | validationState">
					<b-row align-v="center">
						<b-col><SymbolField :id="`${id}-default-symbol-input`" v-model="type.defaultSymbol" :state="v | validationState"></SymbolField></b-col>
						<b-col sm="3"><b-checkbox v-model="type.symbolFixed" @change="setTimeout(() => { v.validate(type.defaultSymbol); })">Fixed</b-checkbox></b-col>
					</b-row>
					<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
				</b-form-group>
			</ValidationProvider>

			<ValidationProvider v-if="canControl.includes('shape')" name="Default shape" v-slot="v" rules="shape">
				<b-form-group label="Default shape" :label-for="`${id}-default-shape-input`" label-cols-sm="3" :state="v | validationState">
					<b-row align-v="center">
						<b-col><ShapeField :id="`${id}-default-shape-input`" v-model="type.defaultShape" :state="v | validationState"></ShapeField></b-col>
						<b-col sm="3"><b-checkbox v-model="type.shapeFixed" @change="setTimeout(() => { v.validate(type.defaultShape); })">Fixed</b-checkbox></b-col>
					</b-row>
					<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
				</b-form-group>
			</ValidationProvider>

			<ValidationProvider v-if="canControl.includes('width')" name="Default width" v-slot="v" :rules="type.widthFixed ? 'required|width' : 'width'">
				<b-form-group label="Default width" :label-for="`${id}-default-width-input`" label-cols-sm="3" :state="v | validationState">
					<b-row align-v="center">
						<b-col><WidthField :id="`${id}-default-width-input`" v-model="type.defaultWidth" :state="v | validationState"></WidthField></b-col>
						<b-col sm="3"><b-checkbox v-model="type.widthFixed" @change="setTimeout(() => { v.validate(type.defaultWidth); })">Fixed</b-checkbox></b-col>
					</b-row>
					<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
				</b-form-group>
			</ValidationProvider>

			<ValidationProvider v-if="canControl.includes('mode')" name="Default routing mode" v-slot="v" :rules="type.modeFixed ? 'required' : ''">
				<b-form-group label="Default routing mode" :label-for="`${id}-default-mode-input`" label-cols-sm="3" :state="v | validationState">
					<b-row align-v="center">
						<b-col><RouteMode :id="`${id}-default-mode-input`" v-model="type.defaultMode" min="1"></RouteMode></b-col>
						<b-col sm="3"><b-checkbox v-model="type.modeFixed" @change="setTimeout(() => { v.validate(type.defaultMode); })">Fixed</b-checkbox></b-col>
					</b-row>
					<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
				</b-form-group>
			</ValidationProvider>

			<hr/>
		</template>

		<b-form-group label="Legend" :label-for="`${id}-show-in-legend-input`" label-cols-sm="3" label-class="pt-0">
			<b-checkbox v-model="type.showInLegend">Show in legend</b-checkbox>
			<template #description>
				An item for this type will be shown in the legend. Any fixed style attributes are applied to it. Dropdown or checkbox fields that control the style generate additional legend items.
			</template>
		</b-form-group>

		<h2>Fields</h2>
		<b-table-simple striped hover responsive>
			<b-thead>
				<b-tr>
					<b-th style="width: 35%; min-width: 150px">Name</b-th>
					<b-th style="width: 35%; min-width: 120px">Type</b-th>
					<b-th style="width: 35%; min-width: 150px">Default value</b-th>
					<b-th>Delete</b-th>
					<b-th></b-th>
				</b-tr>
			</b-thead>
			<draggable v-model="type.fields" tag="tbody" handle=".fm-drag-handle">
				<b-tr v-for="field in type.fields">
					<b-td>
						<ValidationProvider :name="`Field name (${field.name})`" v-slot="v" rules="required|uniqueFieldName:@type">
							<b-form-group :state="v | validationState">
								<b-input v-model="field.name" :state="v | validationState" />
								<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
							</b-form-group>
						</ValidationProvider>
					</b-td>
					<b-td>
						<b-input-group>
							<b-form-select
								v-model="field.type"
								:options="[{ value: 'input', text: 'Text field' }, { value: 'textarea', text: 'Text area' }, { value: 'dropdown', text: 'Dropdown' }, { value: 'checkbox', text: 'Checkbox' }]"
							></b-form-select>
							<b-input-group-append v-if="['dropdown', 'checkbox'].includes(field.type)">
								<b-button @click="editDropdown(field)">Edit</b-button>
							</b-input-group-append>
						</b-input-group>
					</b-td>
					<b-td class="text-center">
						<FieldInput :field="field" v-model="field.default" ignore-default></FieldInput>
					</b-td>
					<b-td class="td-buttons">
						<b-button @click="deleteField(field)">Delete</b-button>
					</b-td>
					<b-td class="td-buttons">
						<b-button class="fm-drag-handle"><Icon icon="resize-vertical" alt="Reorder"></Icon></b-button>
					</b-td>
				</b-tr>
			</draggable>
			<b-tfoot>
				<b-tr>
					<b-td colspan="4">
						<b-button @click="createField()"><Icon icon="plus" alt="Add"></Icon></b-button>
					</b-td>
					<b-td class="move"></b-td>
				</b-tr>
			</b-tfoot>
		</b-table-simple>

		<ValidationProvider vid="type" ref="typeValidationProvider" v-slot="v" rules="" immediate>
			<b-form-group :state="v | validationState">
				<template #invalid-feedback><span v-html="v.errors[0]"></span></template>
			</b-form-group>
		</ValidationProvider>

		<EditTypeDropdown v-if="editField != null" :id="`${id}-dropdown`" :type="type" :field="editField"></EditTypeDropdown>
	</template>
</FormModal>