<template>
  <div
    :class="[
      value,
      statusClassModificator,
      {
        StatusBox_Loading: isLoading,
        'no-border': borderless,
      },
    ]"
    class="StatusBox"
  >
    <q-skeleton
      v-if="isLoading"
      class="full-height full-width skeleton"
      type="QBadge"
    />
    <span v-else class="StatusBox-Text">
      {{ statusLabel }}
      <q-tooltip v-if="tooltip">
        {{ tooltip }}
      </q-tooltip>
    </span>
  </div>
</template>

<style lang="scss" scoped>
.StatusBox {
  display: inline-flex;
  align-items: center;
  text-align: center;
  padding: 0 4px 0 4px;
  font-family: 'Golos Text', sans-serif;
  width: 100%;
  height: 100%;
  background: rgba(53, 126, 172, 0.05);
  color: rgba(2, 12, 18, 0.58);
  border-radius: 2px;
  // border: 1px solid rgba(2, 12, 18, 0.18);

  &-Text {
    width: 100%;
    // min-width: 130px;
    // height: 32px;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-style: normal;
    line-height: 12px;
    text-transform: uppercase;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  &_Loading {
    padding: 0;
  }

  &.registered,
  &.processed {
    background: #e3fefa;
    color: #04967d;
    border-color: #04967d;
  }

  &.received {
    background: #ddf0f9;
  }

  &.failed_to_attend,
  &.rejected {
    background: #fdf3ed;
    color: #cf5f14;
    border-color: #cf5f14;
  }

  &.restrictions_imposed,
  &.--red {
    background: #fee3e7;
    color: #c10525;
    border-color: #c10525;
  }

  &.no-border {
    border-width: 0;
  }

  .skeleton {
    border-radius: 2px;
  }
}
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
// Символьные статусы больше не поддерживаются
// Deprecated:
import { statusDictionary } from '@/recruits/models';
import { codeTypes, StatusTypeEnum } from './data';

export type StatusType = StatusTypeEnum; // | "PersonalFileRequest";
@Component({
  inheritAttrs: false,
})
export default class StatusBoxCell extends Vue {
  @Prop({
    type: String,
    default: '',
  })
  public readonly value: string;

  @Prop({
    type: String,
    default: 'recruit',
  })
  public readonly type: StatusType;

  @Prop({
    type: Boolean,
    default: false,
  })
  public readonly loading: boolean;

  @Prop({
    type: Boolean,
    default: false,
  })
  public readonly borderless: boolean;

  @Prop()
  public readonly tooltip?: string;

  get statusLabel(): string {
    const dictionaryMap: { [key in StatusType]: { [key: string]: string } } = {
      recruit: this.$store.getters[
        //
        'ervuDictionaries/recruitStatusStringDictionary'
      ],
      subpoena: this.$store.getters[
        'ervuDictionaries/subpoenaStatusDictionary'
      ],
      callLists: this.$store.getters[
        'ervuDictionaries/listChangeStatusDictionary'
      ],
      incidents: this.$store.getters[
        'ervuDictionaries/incidentsStatusesDictionary'
      ],
      typeGeps: this.$store.getters['ervuDictionaries/typeGepsDictionary'],
      statusGeps: this.$store.getters['ervuDictionaries/statusGepsDictionary'],
    };
    return (
      (dictionaryMap[this.type] && dictionaryMap[this.type][this.value]) ||
      statusDictionary[this.value] ||
      this.value ||
      'нет'
    );
  }

  get statusClassModificator(): string | null {
    const codeTypeObj = codeTypes[this.type];
    let result = null;

    if (codeTypeObj) {
      const statusIndexes = this.value.split('.');
      const firstLevelCondition = codeTypeObj[statusIndexes[0]] || null;

      if (firstLevelCondition) {
        result =
          firstLevelCondition[statusIndexes[1]] ||
          firstLevelCondition.default ||
          null;
      }
    }

    return result ? `--${result}` : result;
  }

  get isLoading(): boolean {
    return this.loading || !!this.$store.getters['ervuDictionaries/loading'];
  }
}
</script>
