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

<style lang="scss" scoped>
.status-box {
  display: inline-flex;
  align-items: center;
  text-align: center;
  padding: 0 4px 0 4px;
  font-family: 'Golos Text', sans-serif;
  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);

  span {
    // 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;
  }

  .BlockName {
    &-Elem {
      &_Mod {
      }
    }
  }

  &.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';
import get from 'lodash/get';
import { StringDictionary } from '@/recruits/state/ervu-dictionaries';

export type StatusType = StatusTypeEnum; // | "PersonalFileRequest";

@Component({})
export default class StatusBox extends Vue {
  @Prop({
    type: String,
    default: '',
  })
  public readonly status: string;

  @Prop({
    type: String,
    default: StatusTypeEnum.RECRUIT,
  })
  public readonly type: StatusType;

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

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

  @Prop({
    type: String,
  })
  public descriptionPath: string;

  description = '';

  get privateFileMap(): StringDictionary {
    return Object.fromEntries(
      this.$store.getters[
        'ervuDictionaries/privateFileStatusDictionary'
      ].map(({ code, value }: { code: string; value: string }) => [code, value])
    );
  }

  get statusLabel(): string {
    const dictionaryMap: {
      [key in StatusTypeEnum]: { [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'
      ],
      privateFile: this.privateFileMap,
    };

    if (this.descriptionPath) {
      const descriptionDic = this.$store.getters[this.descriptionPath];
      this.description = get(descriptionDic, this.status, '');
    }
    return ((dictionaryMap[this.type] &&
      dictionaryMap[this.type][this.status]) ||
      statusDictionary[this.status] ||
      this.status ||
      'нет') as string;
  }

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

    if (codeTypeObj) {
      const statusIndexes = this.status.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>
