'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _vueClickaway = require('vue-clickaway');

var _lib = require('../../lib');

var _animationHelper = require('./animationHelper');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var closed = 'closed'; /**
                       * Code taken form https://github.com/David-Desmaisons/Vue-Semantic-Modal
                       * Thanks to [David Desmaisons](https://github.com/David-Desmaisons)
                       */

var opening = 'opening';
var open = 'open';
var closing = 'closing';
var changed = 'changed';

function addClass(initial, name) {
  return name === '' ? initial : initial + ' ' + name;
}

function withDirections(animation) {
  return [animation + ' up', animation + ' down', animation + ' left', animation + ' right'];
}

var dimmerVariations = ['', 'inverted'];
var modalVariations = ['', 'fullscreen', 'basic', 'small', 'large'];
var animations = ['scale', 'drop', 'horizontal flip', 'vertical flip', 'fade'].concat((0, _toConsumableArray3.default)(withDirections('fade')), (0, _toConsumableArray3.default)(withDirections('fly')), (0, _toConsumableArray3.default)(withDirections('swing')));

function buildAnimation(name, direction) {
  return 'transition animating ' + name + ' ' + (direction ? 'in' : 'out') + ' visible';
}

function classBuilder(visualState, animation) {
  switch (visualState) {
    case opening:
      return buildAnimation(animation, true) + ' active';

    case open:
      return 'visible active';

    case closing:
      return buildAnimation(animation, false);

    default:
      return '';
  }
}

exports.default = {
  name: 'SuiModal',
  model: {
    prop: 'open',
    event: changed
  },
  directives: { onClickaway: _vueClickaway.directive },
  props: {
    animation: {
      type: String,
      default: 'scale',
      validator: function validator(value) {
        return animations.indexOf(value) !== -1;
      }
    },
    animationDuration: {
      type: Number,
      default: 500
    },
    closeIcon: {
      type: Boolean,
      default: false
    },
    dimmer: {
      type: String,
      default: '',
      validator: function validator(value) {
        return dimmerVariations.indexOf(value) !== -1;
      }
    },
    image: {
      type: Boolean,
      default: false
    },
    open: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: '',
      validator: function validator(value) {
        return modalVariations.indexOf(value) !== -1;
      }
    }
  },
  data: function data() {
    return {
      offsetY: 0,
      visualState: this.open ? open : closed,
      hidden: true,
      loading: true
    };
  },

  computed: {
    dimmerClass: function dimmerClass() {
      return addClass(classBuilder(this.visualState, 'fade'), this.dimmer);
    },
    modalClass: function modalClass() {
      return addClass(classBuilder(this.visualState, this.animation), this.size);
    },
    visibility: function visibility() {
      return this.loading ? 'hidden' : 'visible';
    },
    display: function display() {
      return this.loading || this.open ? 'block' : 'none';
    }
  },
  watch: {
    open: function open(newValue) {
      var _this = this;

      if (newValue) {
        requestAnimationFrame(function () {
          _this.updatePosition();
        });
      }
      this.visualState = newValue ? opening : closing;
    },
    visualState: function visualState(newValue) {
      this.$emit('displayChanged', newValue);
    }
  },
  mounted: function mounted() {
    var modal = this.$el.querySelector('.ui.modal');
    this.modal = modal;
    this.updatePosition();
    this.loading = false;
    this.$el.addEventListener(_animationHelper.eventAnimationEnd, this.onAnimationEnded, false);
  },
  beforeDestroy: function beforeDestroy() {
    this.$el.removeEventListener(_animationHelper.eventAnimationEnd, this.onAnimationEnded, false);
  },

  methods: {
    toggle: function toggle(value) {
      this.$emit(changed, value);
    },
    clickAway: function clickAway() {
      if (this.visualState === open) {
        this.$emit('clickAwayModal');
        this.toggle(false);
      }
    },
    onAnimationEnded: function onAnimationEnded() {
      this.visualState = this.open ? open : closed;
    },
    updatePosition: function updatePosition() {
      this.offsetY = -this.modal.clientHeight / 2;
    }
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];

    var containerStyle = {
      visibility: this.visibility,
      display: this.display,
      animationDuration: this.animationDuration + 'ms'
    };

    var contentStyle = {
      marginTop: this.offsetY + 'px',
      visibility: this.visibility,
      display: this.display,
      animationDuration: this.animationDuration + 'ms'
    };

    var clickAway = {
      directives: [{ name: 'on-clickaway', value: this.clickAway }]
    };

    return h(
      'div',
      {
        'class': (0, _lib.classes)('ui dimmer modals page modal-component', this.dimmerClass),
        style: containerStyle
      },
      [h(
        'div',
        (0, _babelHelperVueJsxMergeProps2.default)([{ 'class': (0, _lib.classes)('ui modal', this.modalClass), style: contentStyle }, clickAway]),
        [this.closeIcon && h(
          'i',
          { 'class': 'close icon', on: {
              'click': function click() {
                return _this2.toggle(false);
              }
            }
          },
          []
        ), this.$slots.default]
      )]
    );
  }
};