<template>
	<div>		
		<v-container>
			<v-card>
				<v-card-title>Options</v-card-title>
				<v-card-text>
					<v-row>
						<v-col>
							<v-btn block to="/create">Create New Slip</v-btn>
						</v-col>
					</v-row>

					<v-row>
						<v-divider></v-divider>
						<v-col cols="12" sm="8">
							<v-text-field label="Label" variant="outlined" v-model="slipSearch"></v-text-field>
						</v-col>
						<v-col cols="12" sm="2">
							<v-btn variant="tonal" color="blue" block size="x-large" @click="goToSlipDetails">View Slip
								ID</v-btn>
						</v-col>
						<v-col cols="12" sm="2">
							<v-btn
							@click="scannerOpen = true"
								fab
								block
								tile
								size="x-large"
								><v-icon>mdi-camera</v-icon></v-btn>												
						</v-col>
					</v-row>
				</v-card-text>
			</v-card>
			<v-card><v-card-text><video id="qr-video"></video></v-card-text></v-card>
			<StreamBarcodeReader v-if="scannerOpen" @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
		</v-container>
	</div>
</template>
<script setup>

import { StreamBarcodeReader } from "vue-barcode-reader";
// Declare router const
const router = useRouter();
let slipSearch = ref("Slip ID");
let scannerOpen = ref(false);
function goToSlipDetails() {
	router.push({ path: `/view/${slipSearch.value}` });
}

function onDecode(result) {
	router.push({ path: `/view/${result}` });
}
function onLoaded() {
	console.log(`Ready to start scanning barcodes`);
}
function onError(result) {
	console.log(result);
}
onMounted(()=>{
  console.log("I am mounted");
})
</script>
