<script setup>
import { reactive, watch } from 'vue';

const props = defineProps({
	edits: {
		type: Object,
		default: null,
	},
	editing: {
		type: Set,
		default: null,
	},
	units: {
		type: String,
		default: null,
	},
});

const emit = defineEmits(['penis', 'units']);
const penis = reactive(props.edits.penis);

watch(penis, () => emit('penis', penis));
</script>

<template>
	<div
		class="figure penis"
	>
		<div class="value-section">
			<span class="value-label">Units</span>

			<select
				:value="units"
				class="input"
				:disabled="!editing.has('penis')"
				@change="emit('units', $event.target.value)"
			>
				<option value="imperial">Imperial</option>
				<option value="metric">Metric</option>
			</select>
		</div>

		<div class="value-section">
			<span class="value-label">Penis length</span>

			<span v-if="units === 'metric'">
				<input
					v-model="penis.metricLength"
					type="number"
					class="volume input"
					min="1"
					max="30"
					:disabled="!editing.has('penis')"
				> cm
			</span>

			<span v-if="units === 'imperial'">
				<input
					v-model="penis.imperialLength"
					type="number"
					class="volume input"
					min="1"
					max="30"
					:disabled="!editing.has('penis')"
				> inch
			</span>
		</div>

		<div class="value-section">
			<span class="value-label">Penis girth</span>

			<span v-if="units === 'metric'">
				<input
					v-model="penis.metricGirth"
					type="number"
					class="volume input"
					min="1"
					max="30"
					:disabled="!editing.has('penis')"
				> cm
			</span>

			<span v-if="units === 'imperial'">
				<input
					v-model="penis.imperialGirth"
					type="number"
					class="volume input"
					min="1"
					max="30"
					:disabled="!editing.has('penis')"
				> inch
			</span>
		</div>

		<div class="value-section">
			<span class="value-label">Circumcised</span>

			<select
				v-model="penis.isCircumcised"
				class="input"
				:disabled="!editing.has('penis')"
			>
				<option :value="null" />
				<option :value="true">Yes</option>
				<option :value="false">No</option>
			</select>
		</div>
	</div>
</template>
