<template>
  <q-card class="FeatureExplanationCard" :style="cardStyle">
    <q-card-section>
      <div
        class="feature-importance shadow-1 q-pl-sm q-pr-sm"
        :style="featureImportanceStyle"
      >
        {{ shapley_value }} %
      </div>
      <div class="column items-center q-gutter-xs">
        <div class="dku-large-title-sb">{{ sensor_name }}</div>
        <div class="dku-large-title-sbt">{{ aggregation }}</div>
      </div>
    </q-card-section>
    <q-card-section style="margin-top: -15px">
      <div class="column items-center q-gutter-xs">
        <div class="dku-text" :style="featureValueStyle">
          <div class="dku-text flex items-center justify-center">
            <div class="q-ml-sm font-weight-bold dku-large-title-sb">
              {{ real_value }}
            </div>
            <q-icon
              name="arrow_upward"
              :style="iconStyle"
              size="sm"
              v-if="order === 'higher'"
            />
            <q-icon
              name="arrow_downward"
              :style="iconStyle"
              size="sm"
              v-if="order === 'lower'"
            />
            <q-icon
              name="help_outline"
              :style="iconStyle"
              size="sm"
              style="margin-left: 7px"
              v-if="order === 'missing'"
            />
          </div>
          <div
            class="dku-text flex items-center justify-center"
            v-if="order !== 'None'"
          >
            vs {{ avg_success_value }}
          </div>
        </div>
      </div>
    </q-card-section>

    <q-card-section style="margin-top: -15px">
      <div class="text-center" v-if="order !== 'missing' && order !== 'None'">
        The {{ name_explanation }} of
        {{ sensor_name }}
        is
        <span class="font-weight-bold">{{ order }}</span> than usual
      </div>
      <div class="text-center" v-if="order === 'missing'">
        The {{ name_explanation }} of
        {{ sensor_name }}
        is
        <span class="font-weight-bold">missing</span>
      </div>
      <div class="text-center" v-if="order === 'None'">
        There is no value leading to a successful batch available for comparison
        for the {{ name_explanation }} of
        {{ sensor_name }}
      </div>
    </q-card-section>
  </q-card>
</template>

<script>
export default {
  name: "FeatureExplanationCard",
  props: {
    sensor_name: {
      type: String,
    },
    name_explanation: {
      type: String,
    },
    order: {
      type: String,
    },
    real_value: {
      type: Number,
    },
    avg_success_value: {
      type: Number,
    },
    shapley_value: {
      type: Number,
    },
    aggregation: {
      type: String,
    },
  },
  computed: {
    coloring() {
      var color = "#ffba08";
      if (this.shapley_value > 20) {
        color = "#E99D2B";
      }
      if (this.shapley_value > 40) {
        color = "#E9412B";
      }
      return color;
    },
    cardStyle() {
      return {
        "--border-color": this.coloring,
        "--linear-percent": this.shapley_value + "%",
      };
    },
    featureImportanceStyle() {
      return {
        color: this.coloring,
        position: "absolute",
        top: "5px",
        left: "15px",
      };
    },
    featureValueStyle() {
      var color = "#fff8ee";
      if (this.shapley_value > 20) {
        color = "#ffeedc";
      }
      if (this.shapley_value > 40) {
        color = "#ffe9e6";
      }
      return {
        "background-color": color,
        width: "100%",
        height: "55px",
      };
    },
    iconStyle() {
      return {
        color: this.coloring,
      };
    },
  },
};
</script>

<style scoped>
.FeatureExplanationCard {
  height: 230px;
  width: 300px;
  border-top: 4px solid var(--border-color);
  position: relative;
  border-radius: 2px 2px 0px 0px;
}

.FeatureExplanationCard:after {
  position: absolute;
  left: var(--linear-percent);
  right: 0;
  top: -4px;
  border-top: 4px solid #cccccc;
  content: "";
}
.score-text {
  color: #666666;
  font-family: "SourceSansPro";
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
}

.active {
  background-color: var(--highlight-color);
}
</style>
