<template>
  <v-sheet dense style="overflow-y: hidden" class="pa-1 pb-2">
    <h3 class="ml-1">{{name}}</h3>
    <div class="d-flex flex-row align-content-stretch">
      <div class="ml-2">&nbsp;</div>
      <slot/>
      <div class="align-self-center ml-auto mr-3 trashcan">
        <v-btn icon="mdi-delete" @click="showDeleteDialog=true"/>
      </div>
    </div>
    <v-dialog v-model="showDeleteDialog" :max-width="300">
      <v-card :title="`Delete ${name}?`" :text="`Do you want to delete this ${name}?`">
        <v-card-actions>
          <v-btn @click="showDeleteDialog=false">Keep</v-btn>
          <v-btn variant="tonal" color="error" @click="deleteMyBuilder">Delete</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-sheet>
</template>

<script setup>
import {builderFuncs, deleteBuilder} from "@/orderbuild.js";
import ColorBand from "@/components/chart/ColorBand.vue";
import RowBar from "@/components/chart/RowBar.vue";
import {onBeforeUnmount, onMounted, onUnmounted, onUpdated, ref, watchEffect} from "vue";

const props = defineProps({
  name: String,
  order: Object,
  builder: Object,
  buildTranches: {type: Function},
  adjustShapes: {type: Function, default: null},
  deleteShapes: {type: Function, default: null},
})
const emit = defineEmits(['update:builder'])

const showDeleteDialog = ref(false)

let lastId = props.builder.id
builderFuncs[props.builder.id] = props.buildTranches
onUpdated(()=>{
  if (lastId !== props.builder.id ) {
    delete builderFuncs[lastId]
    builderFuncs[props.builder.id] = props.buildTranches
    lastId = props.builder.id
  }
})
onUnmounted(() => delete builderFuncs[lastId])

if (props.adjustShapes) {
  watchEffect(props.adjustShapes)
  onMounted(props.adjustShapes)
}

if (props.deleteShapes)
  onBeforeUnmount(props.deleteShapes)

function deleteMyBuilder() {
  showDeleteDialog.value = false;
  deleteBuilder(props.order, props.builder);
}


</script>

<style scoped lang="scss">
@import "@/styles/vars";

.trashcan {
  :hover {
    color: $red;
  }
}
</style>
