<template>
  <div class="wcc-loader-view" v-if="loading">
    <p class="wcc-loading-text">
      <loader />
      {{ $i18n.__("Fetching data", "webtoffee-cookie-consent") }}
    </p>
  </div>
  <div v-else>
    <div class="wcc-row" :data-test-id="'wcc-enable-cookie-banner'">
      <div class="wcc-col-12">
        <div class="wcc-app-box">
          <div class="wcc-row wcc-align-center">
            <label class="wcc-col-3 wcc-col-label" for="wcc-checkbox-cookie-banner">
              {{ $i18n.__("Enable cookie banner", "webtoffee-cookie-consent") }}
            </label>
            <div class="wcc-col-9">
              <input type="checkbox" id="wcc-checkbox-cookie-banner"
                v-model="banner.properties.config.bannerEnabled.status" />
              <span id="wcc-checkbox-cookie-banner" aria-hidden="true"> </span>
              <span v-if="banner.properties.config.bannerEnabled.status" class="wcc-active">{{ $i18n.__("Active",
                "webtoffee-cookie-consent") }}</span>
              <span v-else class="wcc-inactive">{{
                $i18n.__("Inactive", "webtoffee-cookie-consent")
                }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wcc-banner-region-container" :data-test-id="'wcc-banner-region-container'">
      <banner-region-selector :law="appliedLaw" />
    </div>
    <div class="wcc-banner-iab-settings" :data-test-id="'wcc-banner-iab-settings'">
      <IABSettings :law="appliedLaw" />
    </div>
    <div class="wcc-row" :data-test-id="'wcc-advanced-settings'">
      <div class="wcc-col-12">
        <div class="wcc-app-box">
          <accordion class="wcc-app-accordion-no-border wcc-app-accordion-advanced">
            <accordion-item class="wcc-app-accordion-item">
              <template slot="accordion-trigger">
                <label class="wcc-label wcc-app-accordion-title wcc-show-advanced-title" @click="toggleAdvanced" :data-test-id="'wcc-show-advanced-title'">
                  <template v-if="toggleSettings">{{
                    $i18n.__(
                      "Hide advanced settings",
                      "webtoffee-cookie-consent"
                    )
                  }}</template>
                  <template v-else>{{
                    $i18n.__(
                      "Show advanced settings",
                      "webtoffee-cookie-consent"
                    )
                  }}</template>
                </label>
              </template>
              <template slot="accordion-content">
                <div class="wcc-row"  v-if="appliedLaw === 'ccpa'" :data-test-id="'wcc-ccpa-advanced-settings'">
                  <div class="wcc-col-12">
                    <div class="wcc-row">
                      <label class="wcc-col-3 wcc-col-label" for="wcc-checkbox-gpc">
                        {{
                          $i18n.__(
                            "Respect Do Not Track & Global Privacy Control",
                            "webtoffee-cookie-consent"
                          )
                        }}
                         <base-popper :content="$i18n.__(
                        'Enabling this option will hide the consent banner for users with \'Do Not Track\' or \'Global Privacy Control\' settings activated in their browsers, whose default consent status is set to \'denied\'.',
                        'webtoffee-cookie-consent'
                      )
                        "></base-popper>
                      </label>
                      <div class="wcc-col-9">
                        <input type="checkbox" id="wcc-checkbox-gpc"
                          v-model="banner.properties.config.optoutPopup.elements.gpcOption.status" />
                        <span id="wcc-checkbox-gpc" aria-hidden="true"> </span>
                      </div>
                    </div>

                  </div>
                </div>

                <div class="wcc-hide-cookie-banner-on-pages" :data-test-id="'wcc-hide-cookie-banner-on-pages'">
                  <div class="wcc-row wcc-align-center">
                    <label class="wcc-col-3 wcc-col-label" for="wcc-hide-on-pages">
                      {{
                        $i18n.__(
                          "Hide cookie banner on selected pages",
                          "webtoffee-cookie-consent"
                        )
                      }}
                    </label>
                    <div class="wcc-col-9">
                      <MultiSelectInput :placeholderText="placeholderText" :initialItems="pagesToHide"
                        @update:selectedItems="updatePagesToHide" :data-test-id="`wcc-hide-cookie-banner-on-pages-input`" />
                    </div>
                  </div>
                  <div class="wcc-row">
                    <div class="wcc-col-3"></div>
                    <div class="wcc-col-9">
                      <label class="wcc-form-check-label wcc-pages-to-hide-help" for="wcc-pages-to-hide">
                        {{
                          $i18n.__(
                            "Example: https://www.example.com/specific-page",
                            "webtoffee-cookie-consent"
                          )
                        }}
                      </label>
                    </div>
                  </div>
                </div>
                <div class="wcc-cookie-duration" :data-test-id="'wcc-cookie-duration'">
                  <div class="wcc-row wcc-align-center">
                    <label class="wcc-col-3 wcc-col-label" for="wcc-cookie-duration">
                      {{
                        $i18n.__(
                          "Duration of consent",
                          "webtoffee-cookie-consent"
                        )
                      }}
                    </label>
                    <div class="wcc-col-9">
                      <div class="wcc-consent-duration-input-group">
                        <input type="text" id="wcc-duration-of-consent" class="wcc-consent-duration-input"
                          v-model="consentExpiry" :data-test-id="`wcc-duration-of-consent-input`" />
                        <span class="wcc-consent-duration-unit">{{
                          $i18n.__("Days", "webtoffee-cookie-consent")
                          }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="wcc-reload-on-consent" :data-test-id="'wcc-reload-on-consent'">
                  <div class="wcc-row wcc-align-center">
                    <label class="wcc-col-3 wcc-col-label" for="wcc-reload-on-accept">
                      {{
                        $i18n.__(
                          "Reload page upon user consent",
                          "webtoffee-cookie-consent"
                        )
                      }}
                    </label>
                    <div class="wcc-col-9 wcc-input-checkbox">
                      <input type="checkbox" id="wcc-reload-on-accept" v-model="banner.properties.behaviours.reloadBannerOnAccept
                          .status
                        " :data-test-id="`wcc-reload-on-accept-input`" />
                      <span id="wcc-reload-on-accept" aria-hidden="true">
                      </span>
                    </div>
                  </div>
                </div>
              </template>
              <template slot="accordion-content" v-if="appliedLaw === 'ccpa'" :data-test-id="'wcc-ccpa-advanced-settings'">
                <div class="wcc-row">
                  <div class="wcc-col-12">
                    <div class="wcc-do-not-sell-link">
                      <div class="wcc-row wcc-align-center" style="align-items: start">
                        <label class="wcc-col-3 wcc-col-label" for="wcc-do-not-sell-link">
                          {{
                            $i18n.__(
                              "Do not sell link",
                              "webtoffee-cookie-consent"
                            )
                          }}
                        </label>
                        <div class="wcc-col-9 wcc-input-textarea" style="position: relative">
                          <div class="wcc-do-not-sell-link-textarea" style="position: relative; padding-left: 5px" :data-test-id="`wcc-do-not-sell-link-textarea`">
                            <textarea class="wcc-do-not-sell-link-textarea" id="wcc-do-not-sell-link" readonly
                              v-model="linkContent" ref="doNotSellLinkTextarea" :data-test-id="`wcc-do-not-sell-link-textarea`"></textarea>
                            <div class="wcc-copy-icon">
                              <base-icon class="wcc-copy-icon-link" icon="copy-icon"
                                @click="copyToClipboard()" :data-test-id="`wcc-do-not-sell-link-copy-icon`"></base-icon>
                            </div>
                            <div class="wcc-do-not-sell-link-help" :data-test-id="`wcc-do-not-sell-link-help`">
                              {{
                                $i18n.__(
                                  "Add the DNS link to your website footer using the above HTML code",
                                  "webtoffee-cookie-consent"
                                )
                              }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </accordion-item>
          </accordion>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Loader from "@/components/elements/Loader.vue";
import Accordion from "@/components/accordion/Accordion.vue";
import AccordionItem from "@/components/accordion/AccordionItem.vue";
import BannerRegionSelector from "@/modules/banners/components/BannerRegionSelector.vue";
import BaseIcon from "@/components/icons/BaseIcon.vue";
import IABSettings from "@/modules/banners/components/IABSettings.vue";
import MultiSelectInput from "@/modules/banners/components/MultiSelectInput.vue";

import { mapState } from "vuex";

export default {
  name: "TabGeneral",
  components: {
    Loader,
    Accordion,
    AccordionItem,
    BannerRegionSelector,
    BaseIcon,
    IABSettings,
    MultiSelectInput,
  },
  data() {
    return {
      selectedLocation: "all",
      toggleSettings: false,
      isChecked: true,
      linkContent: `<a href='javascript:void(0)' onclick='revisitWccConsent()'>Do Not Sell or Share My Personal Information</a>`,
      pagesToHide: [],
    };
  },
  methods: {
    toggleAdvanced() {
      this.toggleSettings = !this.toggleSettings;
    },
    copyToClipboard() {
      const textarea = this.$refs.doNotSellLinkTextarea;
      textarea.select();
      document.execCommand("copy");
    },
    updatePagesToHide(newItems) {
      this.pagesToHide = newItems;
      this.$store.state.settings.options.hide_banner_on_pages.selected = this.pagesToHide;
    },
  },
  computed: {
    cookieGroups() {
      return this.$store.state.cookies.items;
    },
    banner() {
      return this.$store.state.banners.current;
    },
    loading() {
      return (
        (this.$store.state.banners.current.id &&
          !this.$store.state.banners.current.id > 0) ||
        !Object.prototype.hasOwnProperty.call(this.info, "plan")
      );
    },
    appliedLaw() {
      return this.banner.properties.settings.applicableLaw;
    },
    language() {
      return (
        (this.$store.state.languages.default &&
          this.$store.state.languages.default) ||
        "en"
      );
    },
    googleConsentModeStatus: {
      get() {
        return this.$store.state.settings.options.google_consent_mode.status;
      },
      set(value) {
        this.$store.state.settings.options.google_consent_mode.status = value;
      },
    },
    urlPassthroughStatus: {
      get() {
        return this.$store.state.settings.options.url_passthrough.status;
      },
      set(value) {
        this.$store.state.settings.options.url_passthrough.status = value;
      },
    },
    consentExpiry: {
      get() {
        return this.banner.properties.settings.consentExpiry.value;
      },
      set(value) {
        this.banner.properties.settings.consentExpiry.value = value;
      },
    },
    placeholderText() {
      return this.pagesToHide.length === 0
        ? "Enter specific page URL(s) to exclude banner and press Enter "
        : ""; // Show placeholder only when empty
    },
    ...mapState("settings", ["info"]),
  },
  watch: {},
  mounted() {
    this.pagesToHide =
      this.$store.state.settings.options.hide_banner_on_pages.selected;
  },
};
</script>
<style lang="scss" scoped>
@include wrap-class() {
  .wcc-app-accordion-advanced {
    >.wcc-app-accordion-content .wcc-app-accordion-content-inner {
      padding-left: 0;
    }
  }

  .wcc-pro-features {
    flex-direction: column;
    padding: 15px;

    p {
      margin-top: 10px;
    }

    .wcc-icon-base {
      margin-right: 5px;
    }
  }

  .wcc-banner-tab-cookies {
    padding: 15px 0px;
  }

  .wcc-active {
    background-color: #dffcf0;
    color: #216e4e;
    width: 57px;
    height: 20px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
  }

  .wcc-inactive {
    background-color: #fbebeb;
    color: #962627;
    width: 57px;
    height: 20px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    font-size: 12px;
  }

  .wcc-banner-region-container {
    padding: 12px 20px;
  }

  .wcc-reload-on-consent,
  .wcc-do-not-sell-link,
  .wcc-hide-cookie-banner-on-pages,
  .wcc-cookie-duration {
    background: #fff;
    padding: 12px 20px 12px 0;
    margin-bottom: 15px;
    border-radius: 3px;
  }

  .wcc-input-checkbox {
    padding-left: 20px;
  }

  .wcc-copy-icon {
    position: absolute;
    top: 10px;
    left: 270px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    color: #007bff;
    display: none;
  }

  .wcc-do-not-sell-link-textarea:hover .wcc-copy-icon {
    display: block;
  }

  .wcc-do-not-sell-link-textarea textarea:hover {
    cursor: pointer;
  }

  #wcc-do-not-sell-link {
    width: 314px;
    height: 85px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #eaebed;
    color: #555e6b;
    padding: 15px;
  }

  .wcc-do-not-sell-link-help {
    width: 314px;
    color: #555e6b;
  }

  .wcc-copy-icon {
    padding: 8px 9px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 4px 4px rgba(110, 118, 129, 0.2);
  }

  .wcc-copy-icon:hover {
    cursor: pointer;
  }
  
  .wcc-show-advanced-title {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 6px;
    cursor: pointer;
    margin: 0;
    color: #1863dc;
    display: flex;
    align-items: center;
    font-weight: 500;
    background-color: transparent;
  }

  .wcc-consent-expiry-unit {
    width: 44px;
    height: 37px;
    border-radius: 0px 4px 4px 0px;
    opacity: 0px;
    background-color: #ebf1fd;
  }

  .wcc-consent-duration {
    display: flex;
    align-items: center;
  }

  .wcc-consent-duration-label {
    font-size: 14px;
    color: #333;
    margin-right: 12px;
  }

  .wcc-consent-duration-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    width: 108px;
  }

  .wcc-consent-duration-input {
    border: none;
    padding: 8px;
    width: 50px;
    text-align: left;
    outline: none;
    height: 40px;
    width: 64px;
    box-shadow: none;
  }

  .wcc-consent-duration-unit {
    background-color: #ebf1fd;
    padding: 10px 4px;
    color: #555e6b;
    font-weight: 400;
    height: 40px;
    width: 44px;
    font-family: Inter;
  }

  .wcc-multi-select-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 38px;
    gap: 4px;
    max-width: 546px;
  }

  .wcc-multi-select-tag {
    display: flex;
    align-items: center;
    background-color: #ebf1fd;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
  }

  .wcc-close-icon {
    background: none;
    border: none;
    font-size: 14px;
    margin-left: 4px;
    cursor: pointer;
  }

  .wcc-input-field {
    border: none;
    outline: none;
    flex-grow: 1;
    min-width: 120px;
    padding: 4px;
    font-size: 14px;
    box-shadow: none;
  }

  .wcc-pages-to-hide-help {
    font-family: Inter;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: 14.52px;
    text-align: left;
    padding-top: 10px
  }
}
</style>