<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="8">
          <v-card>
            <v-card-title
              >Mapping List <v-spacer></v-spacer
              ><v-btn color="primary" @click="categoryDialog = true"
                >Add Category</v-btn
              >
              |
              <v-btn color="success" @click="mappingDialog = true"
                >Add Mapping</v-btn
              ></v-card-title
            >
            <v-card-text>
              <v-data-table :headers="headers" :items="GET_AVAILABLE_MAPPINGS">
                <template v-slot:item.actions="{ item }">
                  <v-row
                    ><v-col>
                      <!-- <v-btn small color="warning">
                        <v-icon small class="mr-2">
                          mdi-pencil
                        </v-icon>
                        Edit
                      </v-btn> -->
                      <v-btn
                        small
                        color="error"
                        @click="removeSelectedMapping(item.id)"
                      >
                        <v-icon small> mdi-delete </v-icon>
                        Delete
                      </v-btn>
                    </v-col>
                  </v-row>
                </template>
              </v-data-table>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col cols="4">
          <v-row>
            <v-col>
              <v-card>
                <v-card-title text-center> Current Reading</v-card-title>
                <v-divider></v-divider>
                <v-card-text>
                  <h2>{{ messageRxd }}</h2>
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
          <v-row>
            <v-col>
              <v-card>
                <v-card-title text-center> Available Categories</v-card-title>
                <v-divider></v-divider>
                <v-card-text>
                  <v-data-table
                    :items="GET_CURRENT_USER_CATEGORIES"
                    :headers="categoryHeaders"
                    hide-default-header
                    hide-default-footer
                    dense
                  ></v-data-table>
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>

    <v-dialog v-model="categoryDialog" persistent max-width="350">
      <v-card>
        <v-card-title class="text-h5"> Add New Category </v-card-title>

        <v-card-text>
          <v-col>
            <v-text-field
              v-model="catName"
              outlined
              label="Provide Category Name"
              clearable
            ></v-text-field>
          </v-col>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" text @click="categoryDialog = false">
            Cancel
          </v-btn>
          <v-btn color="green darken-1" text @click="saveNewCategory(catName)">
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="mappingDialog" persistent max-width="500">
      <v-card>
        <v-card-title class="text-h5"> Add New Mapping </v-card-title>

        <v-card-text>
          <v-container fluid>
            <v-row>
              <v-col cols="4">
                <v-subheader>Trigger Name</v-subheader>
              </v-col>
              <v-col cols="8">
                <v-text-field v-model="triggerName"></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4">
                <v-subheader>Trigger Value</v-subheader>
              </v-col>
              <v-col cols="8">
                <v-select
                  :items="GET_AVAILABLE_CATEGORIES"
                  v-model="triggerVal"
                  label="Available Categories"
                ></v-select>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="4">
                <v-subheader>RFID Value</v-subheader>
              </v-col>
              <v-col cols="8">
                <v-text-field v-model="messageRxd"></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" text @click="mappingDialog = false">
            Cancel
          </v-btn>
          <v-btn
            color="green darken-1"
            text
            @click="saveNewMapping(triggerName, triggerVal, messageRxd)"
          >
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import NavBar from "./../components/NavigationBar";
export default {
  name: "IndexPage",
  data() {
    return {
      triggerName: "",
      triggerVal: "",
      catName: "",
      mappingDialog: false,
      categoryDialog: false,
      showScanned: false,
      messageRxd: "",
      socket: null,
      headers: [
        { text: "ID", value: "id" },
        { text: "Name", value: "triggername" },
        { text: "Trigger Value", value: "triggervalue" },
        { text: "RFID", value: "rfid" },
        { text: "Description", value: "description" },
        { text: "Options", value: "actions" },
      ],
      categoryHeaders: [{ text: "Name", value: "description" }],
    };
  },
  computed: {
    ...mapGetters({
      GET_AVAILABLE_CATEGORIES: "modules/globalModule/GET_AVAILABLE_CATEGORIES",
      GET_AVAILABLE_MAPPINGS: "modules/globalModule/GET_AVAILABLE_MAPPINGS",
      GET_CURRENT_USER_CATEGORIES:
        "modules/globalModule/GET_CURRENT_USER_CATEGORIES",
    }),
  },
  components: {
    NavBar: NavBar,
  },
  mounted() {
    this.connectToSocket();
    this.initializeData();
  },
  created() {},
  methods: {
    initializeData() {
      console.log("Initializing data");
      this.$store.dispatch("modules/globalModule/GET_AVAILABLE_CATEGORIES");
      this.$store.dispatch("modules/globalModule/GET_AVAILABLE_MAPPINGS");
      this.$store.dispatch("modules/globalModule/GET_CURRENT_USER_CATEGORIES");
    },
    connectToSocket() {
      this.socket = this.$nuxtSocket({
        channel: "/",
        reconnection: true,
      });
      this.socket.on("payload_channel", (msg, cb) => {
        this.messageRxd = msg;
      });
    },
    saveNewCategory(category) {
      try {
        let app = this;
        this.$store
          .dispatch("modules/globalModule/SAVE_NEW_CATEGORIES", {
            payload: category,
          })
          .then(() => {
            this.$store.dispatch(
              "modules/globalModule/GET_AVAILABLE_CATEGORIES"
            );
            this.$store.dispatch(
              "modules/globalModule/GET_CURRENT_USER_CATEGORIES"
            );
            app.catName = "";
            app.categoryDialog = false;
          });
      } catch (err) {
        console.log(err);
      }
    },
    saveNewMapping(triggername, trigger, rfid) {
      try {
        let app = this;
        this.$store
          .dispatch("modules/globalModule/SAVE_NEW_MAPPING", {
            triggernameVal: triggername,
            triggerVal: trigger,
            rfidVal: rfid,
          })
          .then(() => {
            console.log("Successfully Saved New Mapping");
            this.$store.dispatch("modules/globalModule/GET_AVAILABLE_MAPPINGS");
            this.$store.dispatch(
              "modules/globalModule/GET_CURRENT_USER_CATEGORIES"
            );
            app.triggerName="",
            app.triggerVal = "",
            app.mappingDialog = false;
          });
      } catch (err) {
        console.log(err);
      }
    },
    removeSelectedMapping(id) {
      this.$store
        .dispatch("modules/globalModule/REMOVE_MAPPING", { id, id })
        .then(() => {
          this.$store.dispatch("modules/globalModule/GET_AVAILABLE_MAPPINGS");
        });
    },
  },
};
</script>
