<!-- template for the modal component -->
<template>
  <transition name="modal" v-show="is_open">
    <div class="modal-mask" v-on:click="_onOverlayClick">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-icon sweet-content" ref="content">
            <slot name="icon">
              <!--<div v-if="icon.toUpperCase() === 'WARNING'">
                <i style="color: yellow" class="item-primary">warning</i>
              </div>-->
              <div class="sweet-modal-icon sweet-modal-warning" v-if="icon.toUpperCase() == 'WARNING'" ref="icon_warning">
                <span class="sweet-modal-body"></span>
                <span class="sweet-modal-dot"></span>
              </div>
              <!--<div v-if="icon.toUpperCase() === 'INFO'">
                <i style="color: blue" class="item-primary">info</i>
              </div>-->
              <div class="sweet-modal-icon sweet-modal-info" v-if="icon.toUpperCase() == 'INFO'" ref="icon_info"></div> 
              <!--<div v-if="icon.toUpperCase() === 'ERROR'">
                <i style="color: red" class="item-primary">error</i>
              </div>-->
              <div class="sweet-modal-icon sweet-modal-error" v-if="icon.toUpperCase() == 'ERROR'" ref="icon_error">
                <span class="sweet-modal-x-mark">
                  <span class="sweet-modal-line sweet-modal-left"></span>
                  <span class="sweet-modal-line sweet-modal-right"></span>
                </span>
              </div>
              <!--<div v-if="icon.toUpperCase() === 'SUCCESS'">
                <i style="color: green" class="item-primary">done</i>
              </div>-->
              <div class="sweet-modal-icon sweet-modal-success" v-if="icon == 'SUCCESS'" ref="icon_success">
                <span class="sweet-modal-line sweet-modal-tip"></span>
                <span class="sweet-modal-line sweet-modal-long"></span>
                <div class="sweet-modal-placeholder"></div>
                <div class="sweet-modal-fix"></div>
              </div>
            </slot>
          </div> 

          <div class="modal-header">
            <slot name="header">
              <font>{{ header }}</font>
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              {{ body }}
            </slot>
          </div>

          <div class="modal-button green">
            <slot name="button">						
              <div v-if="type.toUpperCase() === 'INFO'" :content-css="{margin: '30px'}">
                <button class="modal-default-button green" @click="buttonClick('OK')">
									<div v-if="isLoading && async==='OK'" v-cloak>
										<i class="fa fa-circle-o-notch fa-spin fa-1x fa-fw"></i>
									</div>								
									<i>check</i>
                  OK
                </button>
              </div>
              <div v-if="type.toUpperCase() === 'CONFIRM'" :content-css="{margin: '30px'}">
                <button class="modal-default-button blue-grey" @click="buttonClick('NO')">
									<i>clear</i>
                  NO
                </button>
                <button class="modal-default-button green" @click="buttonClick('YES')">
									<i>check</i>
                  YES
                </button>
              </div>
              <div v-if="type.toUpperCase() === 'OK_CANCEL'" :content-css="{margin: '30px'}">
                <button class="modal-default-button blue-grey" @click="buttonClick('CANCEL')">
									<i>cancel</i>
                  CANCEL
                </button>
                <button class="modal-default-button green" @click="buttonClick('OK')">
									<div v-if="isLoading && async==='OK'" v-cloak>
										<i class="fa fa-circle-o-notch fa-spin fa-1x fa-fw"></i>
									</div>								
									<i>check</i>
                  OK
                </button>
              </div>
							<div v-for="m in type.toUpperCase().split('|').reverse()">
								<div v-if="m === 'OK'">
									<button class="modal-default-button green" @click="buttonClick('OK')">
										<div v-if="isLoading && async===m" v-cloak>
											<i class="fa fa-circle-o-notch fa-spin fa-1x fa-fw"></i>
										</div>									
										<i>check</i>
										{{m}}
									</button>
								</div>
								<div v-else-if="m === 'YES'">
									<button class="modal-default-button green" @click="buttonClick('YES')">	
										<div v-if="isLoading && async===m" v-cloak>
											<i class="fa fa-circle-o-notch fa-spin fa-1x fa-fw"></i>
										</div>																	
										<i>check</i>
										{{m}}
									</button>
								</div>
								<div v-else-if="m === 'NO'">
									<button class="modal-default-button blue-grey" @click="buttonClick('NO')">
										<i>clear</i>
										{{m}}
									</button>
								</div>
								<div v-else-if="m === 'CANCEL'">
									<button class="modal-default-button blue-grey" @click="buttonClick('CANCEL')">
										<i>cancel</i>
										{{m}}
									</button>
								</div>
							</div> 
              <div v-for="m in renderCustom">
                <button v-bind:class="mColorObject(m.color)" @click="buttonClick(m.key)">
									<div v-if="isLoading && async===m" v-cloak>
										<i class="fa fa-circle-o-notch fa-spin fa-1x fa-fw"></i>
									</div>
                  {{m.show}}
                </button>
              </div>
            </slot>
          </div>

          <div v-if="footer !== ''" class="modal-footer">
            <slot name="footer">
              {{ footer }}
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import './_icons.scss'
export default {
  props: {
    header: {
      type: String,
      default: ''
    },
    footer: {
      type: String,
      default: ''
    },
    body: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    async: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    blocking: {
      type: Boolean,
      default: false
    },
    custom: {
      type: Array,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      visible: false,
      is_open: false,
      isLoading: false,
      renderCustom: []
    }
  },
  created () {
    this.renderCustom = this.custom
    // this.renderCustom = this.custom.reverse()
  },
  computed: {
    colorObject: function () {
      return {
        'modal-default-button': true,
        color: true
      }
    }
  },
  methods: {
    mColorObject (color) {
      switch (color) {
        case 'green':
          return {
            'modal-default-button': true,
            'green': true
          }
        case 'yellow':
          return {
            'modal-default-button': true,
            'yellow': true
          }
        case 'red':
          return {
            'modal-default-button': true,
            'red': true
          }
        case 'blue-grey':
          return {
            'modal-default-button': true,
            'blue-grey': true
          }
        case 'grey':
          return {
            'modal-default-button': true,
            'grey': true
          }
        case 'blue':
          return {
            'modal-default-button': true,
            'blue': true
          }
        case 'orange':
          return {
            'modal-default-button': true,
            'orange': true
          }
        case 'pink':
          return {
            'modal-default-button': true,
            'pink': true
          }
        case 'light-blue':
          return {
            'modal-default-button': true,
            'light-blue': true
          }
        default:
          return {
            'modal-default-button': true,
            'blue-grey': true
          }
      }
    },
    input () {
      // console.log('input')
    },
    open () {
      this.is_open = true
      setTimeout(() => (this.visible = true), 30)
      this.$emit('open')
    },
    close () {
      this.visible = false
      setTimeout(() => (this.is_open = false), 300)
      this.$emit('close')
    },
    buttonClick (action) {
      if (this.async === action) {
        this.isLoading = true
        setTimeout(async () => {
          this.$emit('action', action)
          this.close()
          this.isLoading = false
        }, 2000)
      }
      else {
        this.$emit('action', action)
        this.close()
      }
    },
    _onOverlayClick (event) {
      if (!event.target.classList || event.target.classList.contains('modal-wrapper')) {
        if (this.blocking) {
        }
        else {
          this.close()
        }
      }
    }
  }
}
</script>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 320px;
  height: auto;
  margin: 0px auto;
  padding: 10px 0px 0px 0px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header {
  margin-top: 0;
  color: #ff3333;
  text-align: center;
  font-weight: 900;
  height: auto;
  max-height: 100px;
}

.modal-icon {
  margin-top: 0;
  text-align: center;
  top: 0;
  /* height: 36px;
  font-size: 36px;
  line-height: 36px;
  border-radius: 50%; */  
}

.modal-body {
  margin: 0px 0;
  max-height: 300px;
  word-break: break-all;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-button {
  padding: 10px 10px 0px 10px;
  margin: 0px 0;
  overflow-x: auto;
  padding-bottom: 50px;
	background-color: LightGray;
}

.modal-footer {
  height: auto;
  position: relative;
  margin-top: -30px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: left;
  vertical-align:middle;
  background-color: LightGray;
  color: purple;
  padding: 0px 0px 0px 10px;
}

.modal-default-button {
  margin: 0px 3px;
  float: right;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.loading{
	display: none;
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(128, 128, 128, 0.5);
}
.loading.show{
	display: initial;
}
</style>
<style lang="scss">
	@import './_mixins.scss';
	@import './_colors.scss';
	@import './_animations.scss';
	@import './_icons.scss';

	.sweet-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;

		width: 100vw;
		height: 100vh;

		overflow-y: auto;
		z-index: 9001;

		font-size: 14px;

		-webkit-font-smoothing: antialiased;

		// Theming
		background: rgba(#fff, 0.9);

		&.theme-dark {
			$color: color(dark-overlay);

			// background: radial-gradient(ellipse at center, rgba($color, 0.9) 0%, rgba($color, 0.96) 100%);
			background: rgba($color, 0.94);
		}

		// Animation
		opacity: 0;
		transition: opacity 0.3s;
		transform: translate3D(0, 0, 0);
		-webkit-perspective: 500px;

		&.is-visible {
			opacity: 1;
		}
	}

	.sweet-modal {
		@include border-box;

		background: #fff;
		box-shadow: 0px 8px 46px rgba(#000, 0.08),
					0px 2px  6px rgba(#000, 0.03);

		position: absolute;
		top: 50%;
		left: 50%;
		// transform: translate(-50%, -50%); // Done by the animation later

		width: 80%;
		max-width: 640px;

		border-radius: 2px;

		.sweet-box-actions {
			position: absolute;
			top: 12px;
			right: 12px;

			.sweet-action-close {
				display: inline-block;
				cursor: pointer;

				color: color(dark);
				text-align: center;

				width: 42px;
				height: 42px;
				line-height: 42px;

				border-radius: 50%;

				svg {
					width: 24px;
					height: 24px;

					vertical-align: middle;
					margin-top: -2px;

					@include svg-path(true) {
						fill: currentColor;
					}
				}

				&:hover {
					background: color(blue);
					color: #fff;
				}
			}
		}

		.sweet-title {
			@include ellipsis;

			height: 64px;
			line-height: 64px;

			border-bottom: 1px solid color(border);

			padding: {
				left: 32px;
				right: 64px;
			}

			> h2 {
				@include ellipsis;

				padding: 0;

				font-weight: 500;
				font-size: 22px;
			}
		}

		ul.sweet-modal-tabs {
			@include ulreset;

			display: flex;
			align-items: center;
			width: calc(100% + 32px);
			height: 100%;

			margin-left: -32px;
			overflow-x: auto;

			li.sweet-modal-tab {
				display: block;
				height: 100%;

				a {
					@include ellipsis;

					display: flex;
					align-items: center;

					padding: {
						left: 20px;
						right: 20px;
					}

					color: color(dark);
					text-decoration: none;
					text-align: center;

					height: 100%;

					span.sweet-modal-tab-title {
						display: block;
					}

					span.sweet-modal-tab-icon {
						display: block;
						line-height: 1.0;

						svg, img {
							width: 16px;
							height: 16px;

							@include svg-path(true) {
								fill: currentColor;
							}
						}
					}

					span.sweet-modal-tab-icon + span.sweet-modal-tab-title {
						line-height: 1.0;
						margin-top: 8px;
					}
				}

				&:first-child a {
					padding-left: 32px;
				}

				&.active a {
					font-weight: 600;
					color: color(blue);
				}

				&.disabled a {
					@include unclickable;
					color: color(light-grey);
				}
			}
		}

		&.has-tabs:not(.has-title) {

			.sweet-title {
				height: 84px;
				line-height: 84px;
			}
		}

		&.has-tabs.has-title {

			ul.sweet-modal-tabs {
				width: 100%;
				height: 48px;

				margin: 0;
				border-bottom: 1px solid color(border);

				li.sweet-modal-tab a {
					margin-top: -4px;

					span.sweet-modal-tab-icon {
						display: inline-block;

						svg, img {
							vertical-align: middle;

							margin: {
								top: -2px;
								right: 8px;
							}
						}
					}

					span.sweet-modal-tab-title {
						display: inline-block;
					}
				}
			}
		}

		.sweet-content {
			display: flex;
			align-items: center;

			padding: {
				left: 32px;
				right: 32px;
				top: 24px;
				bottom: 24px;
			}

			line-height: 1.5;

			.sweet-content-content {
				flex-grow: 1;
			}

			.sweet-modal-tab:not(.active) {
				display: none;
			}

			.sweet-modal-icon {
				margin-bottom: 36px;
			}
		}

		.sweet-buttons {
			text-align: right;

			padding: {
				left: 20px;
				right: 20px;
				top: 12px;
				bottom: 12px;
			}
		}

		.sweet-content + .sweet-buttons {
			border-top: 1px solid color(border);
		}

		// Special Styles
		&.sweet-alert {

			.sweet-content {
				display: block;

				text-align: center;
				font-size: 16px;

				padding: {
					top: 64px;
					bottom: 64px;
				}
			}
		}

		&.has-tabs.has-icon .sweet-content {
			padding: {
				top: 32px;
				bottom: 32px;
			}

			.sweet-content-content {
				padding-left: 32px;
			}

			.sweet-modal-icon {
				margin-bottom: 0;
			}
		}

		&:not(.has-content) {

			.sweet-modal-icon {
				margin-bottom: 0;
			}
		}

		// Theming
		&.theme-dark {
			$color: color(dark-modal);

			background: $color;
			color: #fff;

			.sweet-box-actions {

				.sweet-action-close {
					color: #fff;
				}
			}

			.sweet-title {
				border-bottom-color: darken($color, 8%);
				box-shadow: 0px 1px 0px lighten($color, 8%);
			}

			ul.sweet-modal-tabs li {

				a {
					color: #fff;
				}

				&.active a {
					color: color(blue);
				}

				&.disabled a {
					color: lighten($color, 20%);
				}
			}

			&.has-tabs.has-title {

				ul.sweet-modal-tabs {
					border-bottom-color: darken($color, 8%);
					box-shadow: 0px 1px 0px lighten($color, 8%);
				}
			}

			.sweet-content + .sweet-buttons {
				border-top-color: lighten($color, 8%);
				box-shadow: 0px -1px 0px darken($color, 8%);
			}
		}

		// Animation
		transform: scale(0.9) translate(calc(-50% - 32px), -50%);
		opacity: 0;

		transition: {
			property: transform, opacity;
			duration: 0.3s;
			delay: 0.05s;
			timing-function: cubic-bezier(0.52, 0.02, 0.19, 1.02);
		}

		.sweet-buttons,
		.sweet-content {
			opacity: 0;

			transition: {
				property: transform, opacity;
				duration: 0.3s;
				delay: 0.09s;
				timing-function: cubic-bezier(0.52, 0.02, 0.19, 1.02);
			}
		}

		.sweet-content {
			transform: translateY(-8px);
		}

		.sweet-buttons {
			transform: translateY(16px);
		}

		&.is-visible {
			transform: translate(-50%, -50%);
			opacity: 1;

			.sweet-buttons,
			.sweet-content {
				transform: none;
				opacity: 1;
			}
		}

		&.bounce {
			animation-name: bounce;
			animation-duration: 0.3s;
			animation-iteration-count: 2;
			animation-direction: alternate;
		}

		// Responsiveness
		@include media(desktop) {
			// Bouncing animation
			@keyframes bounce {
				0% {
					transform: scale(1) translate(-50%, -50%);
				}

				50% {
					transform: scale(1.02) translate(calc(-50% + 8px), -50%);
				}

				100% {
					transform: scale(1) translate(-50%, -50%);
				}
			}
		}

		@include media(mobile) {

			& {
				width: 100%;
				height: 100vh;

				left: 0;
				top: 0;

				transform: scale(0.9);

				&.is-visible {
					transform: none;
				}
			}

			.sweet-buttons {
				@include border-box;

				position: absolute;
				bottom: 0;
				left: 0;

				width: 100%;
			}
		}
	}
</style>
