<template>
	<div v-if="!isReadOnly" class="property-title-time-picker">
		<div class="property-title-time-picker__all-day">
			<NcCheckboxRadioSwitch   :checked="isLeave"
				@update:checked="toggleIsLeave">
				{{ $t('calendar', 'Congé') }}
			</NcCheckboxRadioSwitch>
		</div>
	</div>
	<div v-else>
		{{ getIsLeaveLabel }}
	</div>
  </template>
  
  <script>
  import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
  export default {
	name: "PropertyIsLeave",
	components: {
		NcCheckboxRadioSwitch,
	},
	props: {
		isLeave: {
			type: Boolean,
			default: false
		},
	},
	computed: {
		getIsLeaveLabel() {
			console.log(this.isReadOnly);
			return this.isLeave ? this.$t('calendar', 'Congé') : this.$t('calendar', 'Pas de congé');
		}
	},
	methods: {
		toggleIsLeave() {
			const newLeaveState = !this.isLeave;
			this.$emit('toggle-is-leave',newLeaveState)
		},
	}
  };
  </script>
  
  <style scoped>
  .checkbox-container {
	display: flex;
	align-items: center;
	gap: 8px;
  }
  </style>
  