<template>
  <transition name="modal-fade">
    <div class="modal-backdrop" @click="closeFromOutside">
      <div class="modal">
        <header class="modal-header">
          <img src="../../assets/stop-symbol.png" class="stop-icon"></img> 
          <slot name="header">
            Emergency Stop
          </slot>
          <button type="button" class="btn-close" @click="close">x</button>
        </header>
        
        <section class="modal-body">
          <slot name="body">
            Send Stop Command to {{ vehicleName }}?
          </slot>
         </section>
  
        <footer class="modal-footer">
          <button type="button" class="modal-button no-button" @click="close"> No </button>
          <button type="button" class="modal-button yes-button" @click="sendStopCommand"> Yes </button>
        </footer>
      </div>
    </div>
  </transition>
</template>
    
<script lang="ts">
    export default {
        data() {
            return {};    
        },
        props: {
            vehicleName: { required: true, type: String},
        },
        methods: {
            sendStopCommand() {
              console.log("Pressed yes to send stop command for " + this.vehicleName);
              this.close();
            },
            close() {
                this.$emit('close');
            },
            closeFromOutside(event: MouseEvent) {
                if (!this.$el.querySelector('.modal').contains(event.target)) {
                    this.close();
                }
            }
        }
    };
</script>
    
    
<style scoped>
  .modal-backdrop {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .modal {
    background: #FFFFFF;
    box-shadow: 2px 2px 20px 1px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 22%;
    border-radius: 2%;
  }

  .modal-header {
    position: relative;
    display: flex;
    /* justify-content: space-between; */
    gap: 2%;
    /* padding: 15px; */
    padding: 15px;

    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 1px solid #d1cece;
  }

  .modal-body {
    position: relative;
    padding: 20px 10px;
    font-size: 1.8em;
    font-weight: bold;
  }

  .modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20%;
    padding-top: 5%;
  }

  .btn-close {
    position: absolute;
    top: 2%;
    right: 2%;
    border: none;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    color: rgb(255, 57, 57);
    background: transparent;
    transition: color 0.20s;
  }

  .btn-close:hover {
    color: rgb(163, 9, 9);
  }

  .modal-button {
    display:flex;
    justify-content: center;
    color: white;
    width: 15%;
    border-radius: 10%;
    transition: background-color 0.30s;
    font-size: 1.2em;
  }

  .no-button {
    background: rgb(255, 57, 57);
    border: 1px solid rgb(177, 6, 6);
  }
  .no-button:hover {
    background-color: rgb(192, 40, 40);
  }

  .yes-button {
    background: #03b900;    
    border: 1px solid #059402;
  }
  .yes-button:hover {
    background-color: #027500;
  }
  
/* fade in/out transitions for the modal + modal overlay (screen dimming)*/
  .modal-fade-enter-from,
  .modal-fade-leave-to {
    opacity: 0;
  }
  .modal-fade-enter-active, 
  .modal-fade-leave-active {
    transition: opacity .3s ease;
  }

/* slide transitions for modal window */
  .modal-fade-enter-from .modal,
  .modal-fade-leave-to .modal {
    transform: translateY(-40px);
    transition: transform .3s ease;
  }

  .stop-icon {
    width: 5%;
  }
</style>    