<template lang="pug">
	label.flex.font-400.o-inputbox(:for="id", :class="_class")
		input.sr-only(
			:id="id",
			:type="type"
			:name="name",
			:value="value",
			:disabled="disabled",
			:checked="isChecked",
			@change="updateInput",
			@blur="$emit('blur', $event)"
		)
		span.block.w-6.h-6.relative.text-center.flex-shrink-0.mr-2.border.border-grey-03.o-inputbox__box(aria-hidden="true")
			//@slot slot for the tick element
			slot(name="tick-element")
				.flex.items-center.justify-center.w-full.h-full.text-white.opacity-0.o-inputbox__tick
					//@slot slot for the tick icon (just icon)
					slot(name="tick-icon")
						Icon(name='check16')
			span.hidden.absolute-center.w-8.h-8.rounded-50p.bg-white.opacity-0.o-inputbox__tick.o-inputbox__tick--circle
		span.flex-auto.block
			slot
				span.o-inputbox__text(v-html="label")
</template>

<script>
import Icon from '@/components/Icon.vue'
export default {
	components: {
		Icon,
	},
	model: {
		prop: 'modelValue',
		event: 'change',
	},
	props: {
		/** id for \<input\> and \<label\> association */
		id: {
			type: String,
			required: true,
		},
		/** `name` attribute for \<input\> */
		name: {
			type: String,
			default: '',
		},
		/** label text */
		label: {
			type: String,
			default: '',
		},
		/** `value` \<input\> */
		value: {
			type: [String, Array, Object],
			default: '',
		},
		/** Show as checkbox or radiobox
		 * @values checkbox, radio
		 */
		type: {
			type: String,
			default: 'checkbox',
		},
		/** Disabled status
		 */
		disabled: Boolean,
		/** if using v-model */
		modelValue: {
			type: [Boolean, String, Object],
			default: false,
		},
		/** value when the component is checked */
		trueValue: {
			type: [Boolean, String, Object],
			default: true,
		},
		/** value when the component is unchecked */
		falseValue: {
			type: [Boolean, String, Object],
			default: false,
		},
	},
	computed: {
		_class() {
			const { type } = this
			return {
				'o-inputbox--checkbox': type == 'checkbox',
				'o-inputbox--radio': type == 'radio',
			}
		},
		isChecked() {
			if (this.type == 'radio') {
				return this.modelValue == this.value
			}

			if (Array.isArray(this.modelValue)) {
				return this.modelValue.includes(this.value)
			}

			// Note that `true-value` and `false-value` are camelCase in the JS
			return this.modelValue === this.trueValue
		},
	},
	methods: {
		updateInput(e) {
			if (this.type == 'radio') {
				this.$emit('change', this.value, e)
			} else {
				let isChecked = e.target.checked

				if (Array.isArray(this.modelValue)) {
					let newValue = [...this.modelValue]

					if (isChecked) {
						newValue.push(this.value)
					} else {
						newValue.splice(newValue.indexOf(this.value), 1)
					}

					this.$emit('change', newValue, e)
				} else {
					this.$emit('change', isChecked ? this.trueValue : this.falseValue, e)
				}
			}
		},
	},
}
</script>

<docs>
```jsx
<Inputbox id="example-inputbox" label="Checkbox">
	<template v-slot:tick-icon>
	<Icon name="check16" path="/spritemap.svg" />
</template>
</Inputbox>

<Inputbox id="example-inputbox3" label="Disabled" disabled>
	<template v-slot:tick-icon>
	<Icon name="check16" path="/spritemap.svg" />
</template>
</Inputbox>

<fieldset>
	<Inputbox
		id="example-radiobox1"
		type="radio"
		label="Radio"
		name="example"
	/>
	<Inputbox
		id="example-radiobox2"
		type="radio"
		label="Radio"
		name="example"
	/>
	<Inputbox
		id="example-radiobox3"
		type="radio"
		label="Disabled"
		name="example"
		disabled
	/>
</fieldset>
```
</docs>
