import { ref, reactive } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js';

const ModalContainer = {
  template: `
  <component is="style">
  .modal {
    display: none;
  }
  .modal-backdrop {
    z-index: 0;
    background: rgba(0, 0, 0, 0.4);
  }
  /* vueのtransitionを使わないなら不要 */
  .fade-enter-active, .fade-leave-active {
    transition: opacity .15s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  </component>
  <transition name="fade">
  <div v-if="visible">
    <div class="modal" tabindex="-1" :style="display_mode">
      <div class="modal-backdrop show" @click="hide"></div>
      <div class="modal-dialog" :class="size">
        <div class="modal-content">
          <div class="modal-header">
            <slot name="header">
              <button type="button" class="close" @click="hide"><span>×</span></button>
              <h5 class="modal-title">{{ title }}</h5>
            </slot>
          </div>
          <div class="modal-body">
            <slot name="body">
              <p>Modal body text goes here.</p>
            </slot>
          </div>
          <div class="modal-footer">
            <slot name="footer">
              <button type="button" class="btn btn-default" @click="hide">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </div>
  </transition>
  `,
  props: {
    enableBackdrop: { type: Boolean, default: true },
    title:          { type: String,  default: '' },
    size:           { type: String,  default: 'modal-sm' }
  },
  setup(props, context) {
    const visible = ref(false)
    const display_mode      = reactive({display: 'none'})
    let scrollbarWidth      = 0;
    let orgBodyPaddingRight = 0;
    // let orgBodyPosition   = 'relative';
    
    function show() {
      scrollbarWidth      = window.innerWidth - document.body.clientWidth;
      orgBodyPaddingRight = document.body.style.paddingRight;
      // orgBodyPosition     = document.body.style.position;
      // document.body.style.position = 'fixed';
      if (scrollbarWidth ) {
        document.body.style.paddingRight = `${scrollbarWidth }px`;
      }
      // document.body.style.position  = 'fix';
      document.body.style.height    = '100vh';
      document.body.style.overflowY = 'hidden';
      visible.value                 = true;
      display_mode.display          = 'block';
    }
    function hide(event) {
      if (event && event.target.classList.contains('modal-backdrop') && !props.enableBackdrop) return;
      if (scrollbarWidth ) {
        document.body.style.paddingRight = orgBodyPaddingRight;
      }
      // document.body.style.position = orgBodyPosition;
      document.body.style.height    = 'auto';
      document.body.style.overflowY = 'auto';
      visible.value                 = false;      
      display_mode.display          = 'none';
    }
    return {
      visible,
      display_mode,
      show,
      hide
    }
  }
};
export default ModalContainer;