<template lang="html">
  <smart-select
    append-icon="arrow_drop_down"
    :clearable="clearable"
    class="ml-3"
    v-bind="$attrs"
    :menu-props="{transition: 'slide-y-transition', lazy: true}"
    :items="values"
    :value="value"
    @change="(value, ack) => $emit('change', value, ack)"
  >
    <v-icon
      slot="prepend"
      class="icon"
      :class="iconClass"
    >
      {{ displayedIcon }}
    </v-icon>
  </smart-select>
</template>

<script>
	const ICON_SPIN_DURATION = 300;
	let proficiencyIcon = function(value){
		if (value == 0.5){
			return 'brightness_2';
		} else if (value == 1) {
			return 'brightness_1'
		} else if (value == 2){
			return 'album'
		} else {
			return 'radio_button_unchecked';
		}
	};

	export default {
		props: {
			value: {
        type: Number,
        default: undefined,
      },
      clearable: {
        type: Boolean,
        default: true,
      },
		},
		data(){ return {
			displayedIcon: 'radio_button_unchecked',
			iconClass: '',
			values: [
				{value: 1, text: 'Proficient'},
				{value: 0.5, text: 'Half proficiency bonus'},
				{value: 2, text: 'Double proficiency bonus'},
			],
		}},
		watch: {
			'value': {
				immediate: true,
				handler(newValue){
					let newIcon = proficiencyIcon(newValue);
					this.iconClass='leaving';
					setTimeout(() => {
						this.displayedIcon = newIcon;
						this.iconClass='arriving';
						requestAnimationFrame(() => {
							this.iconClass='';
						});
					}, ICON_SPIN_DURATION / 2);
				},
			},
		}
	}
</script>

<style lang="css" scoped>
	.theme--light .icon {
		color: black;
	}
	.icon {
		min-width: 30px;
		transition: transform 0.15s linear, opacity 0.15s ease;
		transform-origin: 18px center;
		margin-left: -12px;
	}
	.icon.leaving {
		transform: translateY(-24px);
		opacity: 0;
	}
	.icon.arriving {
		transform: translateY(24px);
		opacity: 0;
		transition: none;
	}
	.hidden {
		visibility: hidden;
	}
</style>
