<template>
  <div class="py-3 container-fluid">
    <div class="row">
      <!--begin::Col-->
      <div class="col-12 col-md mb-6 mb-xl-10">
        <!--begin::Chart widget 15-->
        <div class="card card-flush h-xl-100">
          <!--begin::Header-->
          <div class="card-header pt-7">
            <!--begin::Title-->
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-dark">{{
                $t("LatestSearches")
              }}</span>

              <span class="text-gray-400 pt-2 fw-semibold fs-6">{{
                $t("LastSearchedTerm")
              }}</span>
            </h3>
            <!--end::Title-->

            <!--begin::Toolbar-->
            <div class="dropdown d-none">
              <button
                class="btn btn-sm btn-light dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                PDF Report
              </button>

              <!--begin::Menu-->
              <div
                class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
                data-kt-menu="true"
              >
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                  <a href="#" class="menu-link px-3"> Remove </a>
                </div>
                <!--end::Menu item-->

                <!--begin::Menu item-->
                <div class="menu-item px-3">
                  <a href="#" class="menu-link px-3"> Mute </a>
                </div>
                <!--end::Menu item-->

                <!--begin::Menu item-->
                <div class="menu-item px-3">
                  <a href="#" class="menu-link px-3"> Settings </a>
                </div>
                <!--end::Menu item-->
              </div>
              <!--end::Menu-->

              <!--end::Menu-->
            </div>
            <!--end::Toolbar-->
            <switch-component
              @change-mode="topRepeatInListMode = !topRepeatInListMode"
              name="top-repeat"
            ></switch-component>
          </div>
          <!--end::Header-->

          <!--begin::Body-->
          <div class="card-body pt-5">
            <!--begin::Chart container-->
            <div
              id="kt_charts_widget_15_chart"
              class="min-h-auto ps-4 pe-6 mb-3 h-300px"
            >
              <ChartMyList
                v-if="topRepeatInListMode"
                :items="lastData"
                :height="'30em'"
              ></ChartMyList>

              <!-- <xy-chart
                v-else
                :data="lastData"
                style="height: 100%; position: relative"
              ></xy-chart> -->
              <Bar v-else :dataChart="lastData" height=" 100%"> </Bar>
            </div>
            <!--end::Chart container-->
          </div>
          <!--end::Body-->
        </div>
        <!--end::Chart widget 15-->
      </div>
      <!--end::Col-->

      <!--begin::Col-->
      <div class="col-12 col-md mb-6 mb-xl-10">
        <!--begin::Chart widget 15-->
        <div class="card card-flush h-xl-100">
          <!--begin::Header-->
          <div class="card-header pt-7">
            <!--begin::Title-->
            <h3 class="card-title align-items-start flex-column">
              <span class="card-label fw-bold text-dark">{{
                $t("ManyRepetitions")
              }}</span>

              <span class="text-gray-400 pt-2 fw-semibold fs-6">{{
                $t("RepeatedSearchTerms")
              }}</span>
            </h3>
            <!--end::Title-->

            <!--begin::Toolbar-->
            <div class="dropdown d-none">
              <button
                class="btn btn-sm btn-light dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                PDF Report
              </button>

              <!--begin::Menu-->
              <div
                class="dropdown-menu menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold w-100px py-4"
                data-kt-menu="true"
              >
                <!--begin::Menu item-->
                <div class="menu-item px-3">
                  <a href="#" class="menu-link px-3"> Remove </a>
                </div>
                <!--end::Menu item-->

                <!--begin::Menu item-->
                <div class="menu-item px-3">
                  <a href="#" class="menu-link px-3"> Mute </a>
                </div>
                <!--end::Menu item-->

                <!--begin::Menu item-->
                <div class="menu-item px-3">
                  <a href="#" class="menu-link px-3"> Settings </a>
                </div>
                <!--end::Menu item-->
              </div>
              <!--end::Menu-->

              <!--end::Menu-->
            </div>
            <switch-component
              @change-mode="lastSearchInListMode = !lastSearchInListMode"
              name="last-serach"
            ></switch-component>
            <!--end::Toolbar-->
          </div>
          <!--end::Header-->

          <!--begin::Body-->
          <div class="card-body pt-5">
            <!--begin::Chart container-->
            <div
              id="kt_charts_widget_15_chart"
              class="min-h-auto ps-6 pe-6 mb-3 h-300px"
              dir="ltr"
              style="direction: ltr"
            >
              <ChartMyList
                v-if="lastSearchInListMode"
                :items="countData"
                :height="'30em'"
              ></ChartMyList>

              <WordCloud
                width="100%"
                v-else
                :data="countData"
                class="h-100 position-relative"
              ></WordCloud>

              <!-- <pie-chart
                v-else
                :data="countData"
                class="h-100 position-relative"
              ></pie-chart> -->
            </div>
            <!--end::Chart container-->
          </div>
          <!--end::Body-->
        </div>
        <!--end::Chart widget 15-->
      </div>
      <!--end::Col-->
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "pinia";
// import HttpService from "~/services/httpService";
import reportExtension from "~/extensions/reportExtension";
import { useCommonStore } from "~/stores/commonStore";

export default {
  extends: reportExtension,

  // beforeMount() {
  // this.permitHttpService = new HttpService(
  //   import.meta.env.VITE_PERMIT_BASE_URL
  // );
  // },
  mounted() {
    const vm = this;
    // ,vm.getData("nokeys")
    Promise.allSettled([vm.getData("last", 20), vm.getData("count")]).then(
      function (results) {
        results.forEach((result, index) => {
          if (result.status === "fulfilled" && result.value.length)
            result.value?.forEach((element) => {
              if (index == 0)
                vm.lastData.push({
                  name: element.key,
                  y: element.doc_count,
                });
              else if (index == 1)
                vm.countData.push({
                  // for list
                  category: element.key,
                  value: element.doc_count,
                  // for cload chart
                  name: element.key,
                  weight: element.doc_count,
                });
              // else if (index == 1)
              //   vm.noKeysData.push({
              //     category: element.key,
              //     value: element.doc_count,
              //   });
            });
        });

        vm.showCharts = true;
      }
    );
  },

  data() {
    return {
      lastSearchInListMode: true,
      topRepeatInListMode: true,
      systems: [],
      db: undefined,
      permitHttpService: undefined,
      lastData: [],
      noKeysData: [],
      countData: [],
      showCharts: false,
    };
  },
  computed: {
    ...mapState(useCommonStore, ["isSidebarCollapsed"]),
  },
  methods: {
    ...mapActions(useCommonStore, [
      "activeSystemSetter",
      "getSystems",
      "setBodyClass",
    ]),

    projectIcon(name) {
      try {
        return import(`assets/common/img/logo/${name}.svg`).default;
      } catch (err) {
        try {
          return import(`assets/common/img/logo/${name}.jpg`).default;
        } catch (err) {
          return import("assets/common/img/default.svg").default;
        }
      }
    },
    redirectTo(project) {
      if (project.loading) return;
      this.$set(project, "loading", true);

      // clearBodyClass();
      this.activeSystemSetter(project);

      if (isValidHttpUrl(project.link)) {
        redirectToExternalLink(project.link, true);
        this.$set(project, "loading", false);
      } else {
        this.$router
          .push("/" + project.link)

          .then((res) => {
            this.$set(project, "loading", false);
          });
      }
    },
  },
  components: {
    ChartMyList: defineAsyncComponent(() =>
      import("@/components/dashboard/default/ChartMyList.vue")
    ),
    WordCloud: defineAsyncComponent(() =>
      import("@/components/charts/WordCloud.vue")
    ),
    Bar: defineAsyncComponent(() =>
      import("@/components/charts/Bar.vue")
    ),
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/auth/signup";

.dashboard-bg {
  // background-image: url(../../../../assets/common/img/main-bg.png);
  background-size: 14em;
  background-position: center;
}

// .modules-selection-page {
//   .navbar {
//     margin-right: 0;

//     .sidebar-toggler {
//       display: none;
//     }
//   }
// }

.dashboard-page {
  height: calc(100vh - 4em);
  // height: calc(100vh - 0px);
  // overflow-y: auto;
  // display: flex;
  // padding: 2em 0;
  //background-color: #f7f7f7;

  .row {
    &.row-gap {
      row-gap: 2em;

      .lds-ring {
        margin-left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(2);
      }
    }
  }

  .no-text-decoration {
    text-decoration: none;
  }
}
</style>
<style lang="scss" scoped>
.text-dark {
  color: var(--bs-text-dark) !important;
}
.pt-7 {
  padding-top: 1.75rem !important;
}
.fw-bold {
  font-weight: 600 !important;
}
.text-dark {
  color: var(--bs-text-dark) !important;
}

.fw-semibold {
  font-weight: 500 !important;
}
.fs-6 {
  font-size: 1.075rem !important;
}
.text-gray-400 {
  color: var(--bs-text-gray-400) !important;
}
.min-h-auto {
  min-height: auto !important;
}
.ps-4 {
  padding-left: 1rem !important;
}
.pe-6 {
  padding-right: 1.5rem !important;
}
.h-300px {
  // height: 300px !important;
  height: 30em !important;
}
.card {
  --bs-text-gray-400: #b5b5c3;
  --bs-body-bg: #fff;
  --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
  --bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
  --bs-menu-dropdown-bg-color: var(--bs-body-bg);

  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: 0.625rem;
  --bs-card-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);

  --bs-card-bg: #f8f9fa;

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  // background-color: var(--bs-card-bg);
  box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
    0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
    0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
    0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  // box-shadow: var(--bs-card-box-shadow);
  border: 0;

  &.card-flush > .card-header {
    border-bottom: 0 !important;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    min-height: 70px;
    padding: 0 2.25rem;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: 1px solid var(--bs-card-border-color);

    .card-title {
      display: flex;
      align-items: center;
      margin: 0.5rem;
      margin-left: 0;

      font-weight: 500;
      font-size: 1rem;
      color: var(--bs-text-dark);

      &.flex-column {
        align-items: flex-start;
        justify-content: center;
      }

      .card-label {
        margin: 0 0.75rem 0 0;
        flex-wrap: wrap;
        font-weight: 500;
        font-size: 1rem;
        color: var(--bs-text-dark);
      }
    }

    .card-toolbar {
      display: flex;
      align-items: center;
      margin: 0.5rem 0;
      flex-wrap: wrap;
    }
  }

  .card-body {
    padding: 2rem 2.25rem;
    color: var(--bs-card-color);
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
  }
}

.menu-sub-dropdown {
  border-radius: 0.475rem;
  background-color: var(--bs-menu-dropdown-bg-color);
  box-shadow: var(--bs-menu-dropdown-box-shadow);
  z-index: 107;
  text-align: right;
}
</style>