<template>
  <div class="c-inline-status"
    :class="[containerSizeClass, containerDirectionClass]">
    <div
      class="c-inline-status__indicator"
      :class="indicatorClasses">
    </div>
    <div
      :class="labelContainerClasses">
      <span class="c-inline-status__label">{{ label }}</span>
      <span class="c-inline-status__secondary-label"
        v-test-id="'secondary-label'"
        v-if="secondaryLabel"
      >{{ secondaryLabel }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ElInlineStatus',
    props: {
      label: String,
      secondaryLabel: String,
      size: {
        type: String,
        default: 'md',
        validator: value => ['md', 'lg'].includes(value)
      },
      status: {
        type: String,
        default: 'success',
        validator(value) {
          return ['success', 'warning', 'error', 'info'].includes(value);
        }
      },
      direction: {
        type: String,
        default: 'vertical',
        validator: value => ['horizontal', 'vertical'].includes(value)
      }
    },
    computed: {
      indicatorClasses() {
        return {
          'c-inline-status__indicator--fail': this.status === 'error',
          'c-inline-status__indicator--success': this.status === 'success',
          'c-inline-status__indicator--warning': this.status === 'warning',
          'c-inline-status__indicator--info': this.status === 'info'
        };
      },
      containerSizeClass() {
        return `c-inline-status--${this.size}`;
      },
      containerDirectionClass() {
        return this.direction === 'vertical'
          ? 'c-inline-status--direction-vertical'
          : 'c-inline-status--direction-horizontal';
      },
      labelContainerClasses() {
        return {
          'c-inline-status__label-container': true,
          'c-inline-status--label-direction-vertical': this.direction === 'vertical',
          'c-inline-status--label-direction-horizontal': this.direction === 'horizontal'
        };
      }
    }
  };
</script>
