<template>
	<div class="swatch-pair">
		<SwatchPairInput />
		<div class="swap-and-reset">
			<IconButton @click="swapColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
			<IconButton @click="resetColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
		</div>
	</div>
</template>

<style lang="scss">
.swatch-pair {
	.swap-and-reset {
		font-size: 0;
	}
}
</style>

<script lang="ts">
import { defineComponent } from "vue";
import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";

const wasm = import("@/../wasm/pkg");

export default defineComponent({
	methods: {
		async swapColors() {
			const { swap_colors } = await wasm;
			swap_colors();
		},
		async resetColors() {
			const { reset_colors } = await wasm;
			reset_colors();
		},
	},
	components: {
		SwatchPairInput,
		IconButton,
	},
});
</script>
