<template>
  <div class="Icon" :class="alignmentCss" :style="`--icon-color: ${iconColor}`">
    <q-icon :name="value ? icon : iconBlank" size="24px" />
  </div>
</template>

<style lang="scss" scoped>
.Icon {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  align-items: center;

  ::v-deep i.pgs-icon {
    color: var(--icon-color);
  }

  &.Icon-NotSet {
    ::v-deep i.pgs-icon {
      color: rgba(2, 12, 18, 0.58);
    }
  }

  &.Icon-Center {
    justify-content: center;
  }
  &.Icon-Left {
    justify-content: flex-start;
  }
  &.Icon-Right {
    justify-content: flex-end;
  }
}
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  inheritAttrs: false,
})
export default class IconCell extends Vue {
  @Prop({
    type: String,
    default: '',
  })
  public readonly value!: string;

  @Prop({
    type: String,
    default: 'pgs-check',
  })
  public readonly icon!: string;

  @Prop({
    type: String,
    default: '#1491cf',
  })
  public readonly iconColor!: string;

  @Prop({
    type: String,
    default: '',
  })
  public readonly iconBlank!: string;

  @Prop({
    type: String,
    default: 'center',
  })
  public readonly align!: 'center' | 'left' | 'right';

  public get alignmentCss(): string {
    let classes = !this.value ? 'Icon-NotSet ' : '';
    switch (this.align) {
      case 'center':
        classes += 'Icon-Center';
        break;
      case 'left':
        classes += 'Icon-Left';
        break;
      case 'right':
        classes += 'Icon-Right';
        break;
    }

    return classes;
  }
}
</script>
