<template>
  <span class="status-indicator" :[status]="true" :pulse="pulse" />
</template>
<script>
export default {
  name: 'XyStatusIndicator',
  props: {
    status: {
      type: String,
      default: '',
      validator(value) {
        if (value === '') return true
        return ['primary', 'success', 'warning', 'error', 'leave'].indexOf(value) !== -1
      }
    },
    pulse: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="scss">
$--status-indicator-size: 10px;
$--status-indicator-animation-duration: 2s;

$test: rgb(251, 211, 76);

$--status-indicator-color: rgb(216, 226, 233);
$--status-indicator-color-semi: rgba(216, 226, 233, 0.5);
$--status-indicator-color-transparent: rgba(216, 226, 233, 0);

$--status-indicator-color-primary: rgb(0, 149, 255);
$--status-indicator-color-primary-semi: rgba(0, 149, 255, 0.5);
$--status-indicator-color-primary-transparent: rgba(0, 149, 255, 0);

$--status-indicator-color-success: rgb(75, 210, 143);
$--status-indicator-color-success-semi: rgba(75, 210, 143, 0.5);
$--status-indicator-color-success-transparent: rgba(75, 210, 143, 0);

$--status-indicator-color-warning: rgb(251, 211, 76);
$--status-indicator-color-warning-semi: rgba(251, 211, 76, 0.5);
$--status-indicator-color-warning-transparent: rgba(251, 211, 76, 0);

$--status-indicator-color-error: rgb(255, 77, 77);
$--status-indicator-color-error-semi: rgba(255, 77, 77, 0.5);
$--status-indicator-color-error-transparent: rgba(255, 77, 77, 0);

$--status-indicator-color-leave: rgb(63, 194, 194);
$--status-indicator-color-leave-semi: rgba(63, 194, 194, 0.5);
$--status-indicator-color-leave-transparent: rgba(63, 194, 194, 0);

@keyframes status-indicator-pulse {
  0% {
    box-shadow: 0 0 0 0 $--status-indicator-color-semi;
  }
  70% {
    box-shadow: 0 0 0 $--status-indicator-size
      $--status-indicator-color-transparent;
  }
  100% {
    box-shadow: 0 0 0 0 $--status-indicator-color-transparent;
  }
}

@keyframes status-indicator-pulse-primary {
  0% {
    box-shadow: 0 0 0 0 $--status-indicator-color-primary-semi;
  }
  70% {
    box-shadow: 0 0 0 $--status-indicator-size
      $--status-indicator-color-primary-transparent;
  }
  100% {
    box-shadow: 0 0 0 0 $--status-indicator-color-primary-transparent;
  }
}

@keyframes status-indicator-pulse-success {
  0% {
    box-shadow: 0 0 0 0 $--status-indicator-color-success-semi;
  }
  70% {
    box-shadow: 0 0 0 $--status-indicator-size
      $--status-indicator-color-success-transparent;
  }
  100% {
    box-shadow: 0 0 0 0 $--status-indicator-color-success-transparent;
  }
}

@keyframes status-indicator-pulse-warning {
  0% {
    box-shadow: 0 0 0 0 $--status-indicator-color-warning-semi;
  }
  70% {
    box-shadow: 0 0 0 $--status-indicator-size
      $--status-indicator-color-warning-transparent;
  }
  100% {
    box-shadow: 0 0 0 0 $--status-indicator-color-warning-transparent;
  }
}

@keyframes status-indicator-pulse-error {
  0% {
    box-shadow: 0 0 0 0 $--status-indicator-color-error-semi;
  }
  70% {
    box-shadow: 0 0 0 $--status-indicator-size
      $--status-indicator-color-error-transparent;
  }
  100% {
    box-shadow: 0 0 0 0 $--status-indicator-color-error-transparent;
  }
}

@keyframes status-indicator-pulse-leave {
  0% {
    box-shadow: 0 0 0 0 $--status-indicator-color-leave-semi;
  }
  70% {
    box-shadow: 0 0 0 $--status-indicator-size
      $--status-indicator-color-leave-transparent;
  }
  100% {
    box-shadow: 0 0 0 0 $--status-indicator-color-leave-transparent;
  }
}

.status-indicator {
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  width: $--status-indicator-size;
  height: $--status-indicator-size;
  background-color: $--status-indicator-color;
}

.status-indicator[pulse] {
  animation-name: status-indicator-pulse;
  animation-duration: $--status-indicator-animation-duration;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 0;
  animation-fill-mode: none;
}

.status-indicator[primary] {
  background-color: $--status-indicator-color-primary;
}

.status-indicator[primary][pulse] {
  animation-name: status-indicator-pulse-primary;
}

.status-indicator[success] {
  background-color: $--status-indicator-color-success;
  animation-name: status-indicator-pulse-success;
}

.status-indicator[success][pulse] {
  animation-name: status-indicator-pulse-success;
}

.status-indicator[warning] {
  background-color: $--status-indicator-color-warning;
}

.status-indicator[warning][pulse] {
  animation-name: status-indicator-pulse-warning;
}

.status-indicator[error] {
  background-color: $--status-indicator-color-error;
  animation-name: status-indicator-pulse-error;
}

.status-indicator[error][pulse] {
  animation-name: status-indicator-pulse-error;
}

.status-indicator[leave] {
  background-color: $--status-indicator-color-leave;
  animation-name: status-indicator-pulse-leave;
}

.status-indicator[leave][pulse] {
  animation-name: status-indicator-pulse-leave;
}
</style>
