<template>
  <div @click="goToWorkflowStep(step)" class="maybe-minimized">
    <MinimizeStep
      :label="getWorkflowStep(step).label"
      :minimized="isMinimized"
      :workflowDescription="getWorkflowStep(step).description"
      class="header"
      :class="{ minimized: isMinimized }"
    />
    <transition name="slide">
      <div class="content" v-show="isMinimized">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
import MinimizeStep from "./PanelButtons/MinimizeStep";
import { mapGetters, mapMutations } from "vuex";
export default {
  components: {
    MinimizeStep,
  },

  data() {
    return {
      p_minimized: null,
    };
  },
  props: {
    step: {
      type: String,
    },
  },
  computed: {
    ...mapGetters(["getCurrentWorkflowStep", "getWorkflowStep"]),
    isMinimized() {
      return this.getCurrentWorkflowStep.id == this.step;
    },
  },
  methods: {
    ...mapMutations(["goToWorkflowStep"]),
  },
};
</script>

<style scoped>
.maybe-minimized {
  margin: 10px;
  flex-grow: 1;
  border-radius: 10px 10px 10px 10px;

  background: var(--neutral);
}
.content {
  padding: 5px;
}
.header {
  font-size: large;
  border-radius: 10px 10px 10px 10px;
  background: var(--cancel-grey);
}
.minimized {
  border-radius: 10px 10px 0px 0px;
}

.slide-enter-active {
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.slide-leave-active {
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slide-enter-to,
.slide-leave {
  /* unless anybody tells me why 100% dos not work... */
  max-height: 1000px;
  overflow: hidden;
}

.slide-enter,
.slide-leave-to {
  overflow: hidden;
  max-height: 0;
}
</style>