import BaseButton from '@elements/BaseButton/index.vue';

export default {
  name: 'BaseAlert',
  components: {
    BaseButton,
  },
  props: {
    apperance: {
      type: String,
      default: null,
      validator(value) {
        return ['success', 'error', 'warning', null].indexOf(value) !== -1;
      },
    },
  },
  data() {
    return {
      displayTime: null
    };
  },
  created() {
    this.setTimeoutClose();
    this.$watch('apperance', () => {
        this.setTimeoutClose();
    });
  },
  computed: {
    classObject() {
      return {
        'alert-success': this.apperance === 'success',
        'alert-error': this.apperance === 'error',
        'alert-warning': this.apperance === 'warning',
      };
    },
  },
  methods: {
    onAlertClose() {
      this.clear();
      this.$emit('close', this.$refs.container);
    },
    clear() {
      if (this.displayTime) {
        clearTimeout(this.displayTime);
        this.displayTime = null;
      }
    },
    setTimeoutClose(){
      if (this.apperance) {
        this.clear();
        this.displayTime = setTimeout(() => {
          this.onAlertClose();
        }, 5000);
      }
    }
  },
};
