<template>
  <v-app>
    <v-main>

      <v-container>
        <v-card>
          <v-card-title>Bottom keyboard smash detector</v-card-title>
          <v-card-text>
            <v-textarea
                v-model="message"
                rows="2" outlined
                label="Type message here"
                clearable
                no-resize
                counter
                :loading="!initialized || computing"
                :disabled="!initialized"
                :counter-value="x => `${x ? x.length : 0}/96`"
                :rules="[v => v.length <= 96 || 'Max 96 characters']"
            >
            </v-textarea>

            <v-btn @click="doPrediction()">Predict</v-btn>

            <div class="mb-5"></div>

            <v-alert
                v-if="prediction > 0.5"
                prominent
                outlined
                type="warning"
                border="left"
            >
              <template #prepend>
                <PleadingEmoji></PleadingEmoji>
              </template>
              &nbsp;
              You're a bottom
            </v-alert>

            <v-alert
                v-else-if="prediction !== 0"
                prominent
                outlined
                type="info"
                border="left"
            >
              <template #prepend>
                <RobotEmoji></RobotEmoji>
              </template>
              &nbsp;
              You're a robot
            </v-alert>

          </v-card-text>

        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import BottomKeySmashClassifier from "@/model";
import PleadingEmoji from "@/components/PleadingEmoji";
import RobotEmoji from "@/components/RobotEmoji";

export default {
  name: 'App',

  components: {
    RobotEmoji,
    PleadingEmoji
  },

  data: () => ({
    message: "",
    initialized: false,
    computing: false,
    model: null,
    prediction: 0,
  }),

  created() {
    this.model = new BottomKeySmashClassifier();

    this.model.init().then(() => {
      this.initialized = true;
    });
  },

  methods: {
    doPrediction() {
      this.predict().then(p => {
        this.prediction = p;
      })
    },
    async predict() {
      this.computing = true;
      const result = await this.model.predict(this.message);
      this.computing = false;

      console.log(result)

      return result;
    }
  }
};
</script>

<style>
@media (min-width: 1904px) {
  .container {
    max-width: 1185px;
  }
}
</style>
