<template>
<div class="q-pa-md">
    <div class="btn-group-container">
        <q-btn-group spread>
        <q-btn label="Undo" icon="undo" no-caps @click="handleUndo" :disable="disableUndo"/>
        <q-separator vertical inset />
        <q-btn label="Refine" icon="edit" no-caps @click="handleRefine" :push="refineActive"/>
        <q-separator vertical inset />
        <q-btn label="Copy" icon="content_copy" no-caps @click="handleCopy"/>
        <q-separator vertical inset />
        <q-btn label="Save" icon="save" no-caps @click="handleSave"/>
        </q-btn-group>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    props: {
        disableUndo: {
            type: Boolean,
            required: true
        },
    },
    data() {
        return {
            refineActive: false,
        }
    },
    emits: ["undo", "refine", "copy", "save"],
    methods: {
        async handleUndo() {
            this.$emit("undo");
        },
        async handleRefine() {
            this.refineActive = !this.refineActive;
            this.$emit("refine", this.refineActive);
        },
        async handleCopy() {
            this.$emit("copy");
        },
        async handleSave() {
            this.$emit("save");
        },
    }   
})

</script>


<style scoped>
.q-btn {
    color: #2B66FF;
    font-weight: 400;
    font-size: 12px;
    background-color: white;
    padding: 4px;
}

.q-btn--push {
    color: #214AB5;
    font-weight: 400;
    font-size: 12px;
    background-color: white;
    padding: 4px;
}

.q-pa-md {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    /* justify-content: center; */
}

.q-icon {
    margin-right: 8px;
}

.q-btn-group {
    flex: 1;
    margin: auto;
}

.btn-group-container {
  width: 450px;
  flex: 1;
  margin: auto;
}

</style>