<template>
    <div class="wrap tab-pane" v-if="hasLoaded">
      <div class="row">
        <div class="m-all">
          <template>
            <h6>Free use Policy</h6>
            <p>In order to use the free version of Enstract, I agree to show a snippet of text at the bottom of my entity pages which states: <a href="https://www.bluearray.co.uk/enstract/" target="_blank">Entity Extraction by Blue Array’s ‘Enstract’ Plugin</a>
              <label class="enstract-checkboxes">
                <input type="checkbox" class="enstract-checkbox" v-model="free_use_policy_checkbox"> 
                <span class="checkmark"></span>
              </label>
            </p>
          </template>
        </div>
      </div>

      <div class="row dash-heading">
        <div class="d-5of7 m-all t-all">
          <h1>Settings</h1>

          <p>
            Here you can set your preferences for using Enstract on this
            Wordpress site.
          </p>
        </div>

        <div class="m-all">
          <Button 
            v-if="!isSaved"
            :buttonClass="'enstract-button eb-full-width text-center save-setting'" 
            :buttonName="'Save Settings'"
            @click.native="updateSettings" :ButtonType="'button'"></Button>

          <div class="row settings-message">
            <p v-if="isSaved">Saved Successfully</p>
          </div>
        </div>
      </div>

      <div class="row setting-item">

        <template>
          <div class="d-all m-all t-all">
            <h5>Metabox Visibility</h5>
            <p>
              Choose whether you would like to be able to mine entities from
              posts, pages or both by controlling where the metabox appears.
              Simply select your preference from the dropdown below.
            </p>
          </div>

          <div class="d-all t-all m-all setting-mine-entities">
            <select v-model="mine_entities_value" class="m-all" v-if="free_use_policy">
              <option value="1">Both</option>
              <option value="2">Posts</option>
              <option value="3">Pages</option>
            </select>
            <select v-model="mine_entities_value" class="m-all" disabled="disabled" v-else>
              <option value="1">Both</option>
              <option value="2">Posts</option>
              <option value="3">Pages</option>
            </select>
          </div>
      </template>

        <br clear="both" />
        <br clear="both" />
      </div>

      <hr />

      <div class="row salience-thresholds">
        <h5>Salience Thresholds</h5>
        <p>
          Control the minimum salience score which entities must meet in order to be returned from the system and inline linked in your posts &amp; pages. Scores closer to 0.0 are less important, while scores closer to 1.0 are highly important.
        </p>

        <input type="text" readonly="readonly" :value="salience_score" v-if="free_use_policy" />
        <input type="text" readonly="readonly" :value="salience_score" v-else disabled="disabled"/>
        <input
          type="range"
          min="0.00"
          step="0.01"
          max="1.00"
          class="salience_range"
          id="salience_range"
          v-model="salience_score"
          v-if="free_use_policy"
        />
        <input
          type="range"
          min="0.00"
          step="0.01"
          max="1.00"
          class="salience_range"
          id="salience_range"
          v-model="salience_score"
          disabled="disabled"
          v-else
        />
      </div>

      <hr />

      <div class="row coming-soon m-all t-all">
        <div class="d-5of7 m-all t-all">
          <h5>Coming soon to premium</h5>
          <p>
            Shortly we'll be enhancing the functionality available within
            Enstract for a small annual fee.
          </p>
        </div>

        <div>
          <Ancor :AncorClass="'enstract-button eb-full-width text-center find-out-more'" 
            :link="'https://www.bluearray.co.uk/enstract/'" :name="'Find out more'">
          </Ancor>
        </div>

        <div class="d-all m-all t-all">
          <h6>So, what can you expect?</h6>
          <p>We're working hard to build the following features</p>
          <ul>
            <li>
              Automine: Toggle whether the entity extraction process should
              occur automatically
            </li>
            <li>
              Bulk entity extraction: Mine all of your content archives at the
              flick of a switch
            </li>
            <li>
              Cost predictor: Predict how much will it cost to mine your archive
            </li>
            <li>Control the number of inline linked entities</li>
            <li>
              Select where content is inline linked (e.g between x and x words)
            </li>
            <li>
              Choose html tags to ignore (e.g ignore h2 tags for inline linking)
            </li>
            <li>Remove Enstract branding/badging on entity hub pages.</li>
            <li>All this and much more..</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import Button from "../includes/Button";
import Ancor from "../includes/Ancor";
import api from "../../mixins/api";
export default {
  props: ["hasLoaded", "mine_entities", "salience", "free_use_policy"],
  mixins: [api],
  components: {
    Button,
    Ancor,
  },
  beforeRouteEnter(to, from, next) {
    if (from.fullPath == "/onboarding" || from.fullPath == "/login") {
      next((vm) => {
        vm.$router.go();
      });
    }

    next();
  },
  data() {
    return {
      isSaved: false,
      salience_score: null,
      mine_entities_value: null,
      free_use_policy_checkbox: null,
    };
  },
  mounted() {
    this.salience_score = this.salience;
    this.mine_entities_value = this.mine_entities;
    this.free_use_policy_checkbox = this.free_use_policy;
  },
  methods: {
    // check setting
    async updateSettings() {
      // Setting our data
      const data = {
        mine_entities: this.mine_entities_value,
        mine_entities_key: "mine_entities",
        salience: this.salience_score,
        salience_key: "salience_threshold",
        free_use_policy_checkbox_key: "free_use_policy",
        free_use_policy_checkbox: this.free_use_policy_checkbox
      };

      // sending off a request that saves our settings
      const response = await this.api(
        "post",
        window.apipath + "/users/settings",
        data,
        0,
        1
      );

      if (response.status == 200) {
        this.isSubmitted = false;
        this.hasOnBoarded = true;
        this.isSaved = true;

         if(this.free_use_policy_checkbox == 1) {
           this.free_use_policy = 1;
         } else {
          this.free_use_policy = 0;
         }

        setTimeout(() => {
          this.isSaved = false;
        }, 3000);
      } else {
        this.isSubmitted = false;
      }
    },
  },
};
</script>
