<template>
  <div
    class="popup-panel flex flex-col uw-clickable h-full main-window relative"
  >
    <div class="popup-window-header">
      <div class="header-title">
        <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
        <div class="site-support-info flex flex-row">
          <div class="site-support-site">{{site}}</div>
          <SupportLevelIndicator
            v-if="inPlayer"
            :siteSupportLevel="siteSupportLevel"
          >
          </SupportLevelIndicator>
        </div>
      </div>
      <div class="header-buttons">
        <div
          class="header-button close-button"
          @click="$emit('close')"
        >
          <mdicon name="close" :size="36"></mdicon>
        </div>
        <!-- <a >{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a> -->
      </div>
    </div>

    <SettingsWindowContent
      :tabs="tabs"
      :selectedTab="selectedTab"
      :settings="settings"
      :eventBus="eventBus"
      :logger="logger"
      :in-player="inPlayer"
      :site="site"
      @selectTab="selectTab"
      @preventClose="setPreventClose"
    ></SettingsWindowContent>
  </div>
</template>
<script>
import DebugPanel from './PlayerUiPanels/DebugPanel.vue'
import AutodetectionSettingsPanel from './PlayerUiPanels/AutodetectionSettingsPanel.vue'
import BaseExtensionSettings from './PlayerUiPanels/BaseExtensionSettings.vue'
import PlayerDetectionPanel from './PlayerUiPanels/PlayerDetectionPanel.vue'
import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
import BrowserDetect from '../../ext/conf/BrowserDetect'
import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
import AboutPanel from '@csui/src/PlayerUiPanels/AboutPanel.vue'
import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'

export default {
  components: {
    VideoSettings,
    PlayerDetectionPanel,
    BaseExtensionSettings,
    AutodetectionSettingsPanel,
    DebugPanel,
    PlayerUiSettings,
    ChangelogPanel,
    AboutPanel,
    SupportLevelIndicator,
    ResetBackupPanel,
  },
  mixins: [],
  data() {
    return {
      statusFlags: {
        hasDrm: undefined,
      },
      BrowserDetect: BrowserDetect,
      preventClose: false,
      siteSettings: null,
    }
  },
  props: [
    'settings',
    'eventBus',
    'logger',
    'in-player',
    'site',
    'defaultTab'
  ],
  computed: {
    // LPT: NO ARROW FUNCTIONS IN COMPUTED,
    // IS SUPER HARAM
    // THINGS WILL NOT WORK IF YOU USE ARROWS
    siteSupportLevel() {
      return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
    }
  },
  created() {
    this.settings.listenAfterChange(this.setDebugTabVisibility);

    if (this.defaultTab) {
      this.selectedTab = this.defaultTab;
    }
    this.siteSettings = this.settings.getSiteSettings({site: this.site});
    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;

    this.eventBus.subscribe(
      'uw-show-ui',
      {
        source: this,
        function: () => {
          if (this.inPlayer) {
            return; // show-ui is only intended for global overlay
          }
        },
      }
    )
    this.setDebugTabVisibility();
  },
  destroyed() {
    this.settings.removeListenerAfterChange(this.setDebugTabVisibility);
    this.eventBus.unsubscribeAll(this);
  },
  methods: {
    /**
     * Gets URL of the browser settings page (i think?)
     */
    getUrl(url) {
      return BrowserDetect.getURL(url);
    },
    selectTab(tab) {
      this.selectedTab = tab;
    },
    setPreventClose(bool) {
      this.preventClose = bool;
      this.$emit('preventClose', bool);
    },
    setDebugTabVisibility() {
      const debugTab = this.tabs.find( x => x.id === 'debugging');
      if (debugTab) {
        debugTab.hidden = !this.settings.active.ui.devMode;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/*@import '../res/css/uwui-base.scss';
@import '../res/css/colors.scss';
@import '../res/css/font/overpass.css';
@import '../res/css/font/overpass-mono.css';
@import '../res/css/common.scss';
@import '../src/res-common/_variables';*/


.tab-row {
  width: 22rem;
  flex-grow: 0;
  flex-shrink: 0;
}

.tab-main {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
}

.content {
  flex-grow: 1;

  .warning-area {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .panel-content {
    flex-grow: 1;
    flex-shrink: 1;

    overflow-y: auto;
    padding: 1rem;
  }
}

.warning-box {
  background: rgb(255, 174, 107);
  color: #000;
  margin: 1rem;
  padding: 1rem;

  display: flex;
  flex-direction: row;
  align-items: center;

  .icon-container {
    margin-right: 1rem;
    flex-shrink: 0;
    flex-grow: 0;
  }

  a {
    color: rgba(0,0,0,0.7);
    cursor: pointer;
  }
}


.site-support-info {
  display: flex;
  flex-direction: row;
  align-items: bottom;

  .site-support-site {
    font-size: 1.5em;
  }
}

.popup-panel {
  background-color: rgba(0,0,0,0.50);
  color: #fff;

  overflow-y: auto;

  .popup-window-header {
    padding: 1rem;
    background-color: rgba(5,5,5, 0.75);

    display: flex;
    flex-direction: row;

    .header-title {
      flex: 1 1;
    }
    .header-buttons {
      flex: 0 0;
      display: flex;
      flex-direction: row;

      .header-button {
        cursor: pointer;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;

        &.button-active {
          background-color: #fa6;
          color: #000;

          &:hover {
            color: #ccc;
          }
        }

        &.close-button {
          color: #f00;
        }

        &:hover {
          color: #fa6;
        }
      }
    }
  }
  .tab-row {
    background-color: rgba(11,11,11, 0.75);

    .tab {
      display: flex;
      flex-direction: row;
      align-items: center;

      padding: 2rem;
      font-size: 1.5rem;
      height: 6rem;

      border-bottom: 1px solid rgba(128, 128, 128, 0.5);
      border-top: 1px solid rgba(128, 128, 128, 0.5);
      opacity: 0.5;

      &:hover {
        opacity: 1;
      }
      &.active {
        opacity: 1.0;
        background-color: $primaryBg;
        color: rgb(255, 174, 107);
        border-bottom: 1px solid rgba(116, 78, 47, 0.5);
        border-top: 1px solid rgba(116, 78, 47, 0.5);
      }

      .icon-container {
        width: 64px;
        flex-grow: 0;
        flex-shrink: 0;
      }
      .label {
        flex-grow: 1;
        flex-shrink: 1;
        padding: 0 !important;
      }

      &.highlight-tab {
        opacity: 0.9;
        color: #eee;
      }
    }
  }

  .popup-title, .popup-title h1 {
    font-size: 48px !important;
  }
}

pre {
  white-space: pre-wrap;
}


</style>
