<!--
@license GNU AGPL version 3 or any later version

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
  <NcContent
    v-if="config"
    app-name="side_menu"
  >
    <NcAppContent>
      <div class="side-menu-setting">
        <NcButton
          v-for="item in menu"
          :key="item.label"
          :variant="item.section === section ? 'primary' : 'secondary'"
          @click="setSection(item.section)"
          >{{ trans(item.label) }}</NcButton
        >
      </div>

      <TableContainer :class="sectionClass('panel')">
        <TableRow>
          <TableLabel
            label="Display the logo"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['display-logo']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Use the avatar instead of the logo"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['use-avatar']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="The logo is a link to the default app"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['add-logo-link']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Show the link to settings"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['show-settings']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Icons"
            :middle="true"
          />
          <TableValue>
            <FormSize v-model="config['size-icon']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Texts"
            :middle="true"
          />
          <TableValue>
            <FormSize v-model="config['size-text']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Loader enabled"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['loader-enabled']" />
          </TableValue>
        </TableRow>
      </TableContainer>

      <TableContainer :class="sectionClass('topMenu')">
        <TableRow>
          <TableLabel
            label="Applications kept in the top menu"
            :middle="true"
          />
          <TableValue>
            <FormAppPicker v-model="config['top-menu-apps']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Applications kept in the top menu but also shown in side menu"
            help="These applications must be selected in the previous option."
            :middle="true"
          />
          <TableValue>
            <FormAppPicker v-model="config['top-side-menu-apps']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Hide labels on mouse over"
            :top="true"
          />
          <TableValue>
            <FormSelect
              v-model="config['top-menu-mouse-over-hidden-label']"
              :expanded="true"
              :options="[
                { id: 1, label: 'Yes' },
                { id: 0, label: 'No' },
                { id: 2, label: 'Except the hovered app' },
              ]"
            />
          </TableValue>
        </TableRow>
      </TableContainer>

      <TableContainer :class="sectionClass('apps')">
        <TableRow>
          <TableLabel
            label="Apps that should not be displayed in the menu"
            :middle="true"
          />
          <TableValue>
            <FormAppPicker v-model="config['big-menu-hidden-apps']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Open apps in new tab"
            :middle="true"
          />
          <TableValue>
            <FormAppPicker v-model="config['target-blank-apps']" />
          </TableValue>
        </TableRow>
      </TableContainer>

      <TableContainer :class="sectionClass('opener')">
        <TableRow>
          <TableLabel
            label="Opener"
            :middle="true"
          />
          <TableValue>
            <FormOpener v-model="config['opener']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Dark mode opener"
            :middle="true"
          />
          <TableValue>
            <FormOpener v-model="config['dark-mode-opener']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Position"
            :middle="true"
          />
          <TableValue>
            <FormSelect
              v-model="config['opener-position']"
              :options="[
                { id: 'before', label: 'Before the logo' },
                { id: 'after', label: 'After the logo' },
              ]"
            />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Show only the opener (hidden logo)"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['opener-only']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
            help="This is the automatic behavior when the menu is always displayed."
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['opener-hover']" />
          </TableValue>
        </TableRow>
      </TableContainer>

      <TableContainer :class="sectionClass('colors')">
        <SectionTitle label="Colors" />

        <TableRow>
          <TableLabel
            label="Background color"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['background-color']" />
            <FormColorPicker v-model="config['background-color-to']" />
            <FormRange
              v-model="config['background-color-opacity']"
              prepend="Transparent"
              append="Opaque"
            />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Background color of current app"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['current-app-background-color']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Text color"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['text-color']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Loader"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['loader-color']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Icon"
            :middle="true"
          />
          <TableValue>
            <FormRange
              v-model="config['icon-invert-filter']"
              prepend="Same color"
              append="Opposite color"
            />
            <FormRange
              v-model="config['icon-opacity']"
              prepend="Transparent"
              append="Opaque"
            />
          </TableValue>
        </TableRow>

        <SectionTitle label="Dark mode colors" />

        <TableRow>
          <TableLabel
            label="Background color"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['dark-mode-background-color']" />
            <FormColorPicker v-model="config['dark-mode-background-color-to']" />
            <FormRange
              v-model="config['dark-mode-background-color-opacity']"
              prepend="Transparent"
              append="Opaque"
            />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Background color of current app"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['dark-mode-current-app-background-color']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Text color"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['dark-mode-text-color']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Loader"
            :middle="true"
          />
          <TableValue>
            <FormColorPicker v-model="config['dark-mode-loader-color']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Icon"
            :middle="true"
          />
          <TableValue>
            <FormRange
              v-model="config['dark-mode-icon-invert-filter']"
              prepend="Same color"
              append="Opposite color"
            />
            <FormRange
              v-model="config['dark-mode-icon-opacity']"
              prepend="Transparent"
              append="Opaque"
            />
          </TableValue>
        </TableRow>
      </TableContainer>

      <TableContainer :class="sectionClass('global')">
        <TableRow>
          <TableLabel
            label="The menu is enabled by default for users"
            help="Except when the configuration is forced."
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['default-enabled']" />
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Force this configuration to users"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['force']" />
          </TableValue>
        </TableRow>
      </TableContainer>

      <TableContainer :class="sectionClass('support')">
        <TableRow>
          <TableLabel
            label="You like this app and you want to support me?"
            :middle="true"
          />
          <TableValue>
            <a
              target="_blank"
              href="https://www.buymeacoffee.com/deblan"
              rel="noopener"
            >
              <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
            </a>
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel label="Need help" />
          <TableValue class="button-inline">
            <a
              target="_blank"
              href="https://deblan.gitnet.page/side_menu_doc/"
              rel="noopener"
            >
              <NcButton variant="secondary">{{ trans('Open the documentation') }}</NcButton>
            </a>
            <a
              target="_blank"
              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml"
              rel="noopener"
            >
              <NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton>
            </a>
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="I would like a new feature"
            :middle="true"
          />
          <TableValue>
            <a
              target="_blank"
              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml"
              rel="noopener"
            >
              <NcButton variant="secondary">{{ trans('New request') }}</NcButton>
            </a>
          </TableValue>
        </TableRow>

        <TableRow>
          <TableLabel
            label="Something went wrong"
            :top="true"
          />
          <TableValue class="button-inline">
            <a
              target="_blank"
              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml"
              rel="noopener"
            >
              <NcButton variant="secondary">{{ trans('Report a bug') }}</NcButton>
            </a>
            <NcButton
              variant="secondary"
              @click="showConfig = true"
              >{{ trans('Show the configuration') }}</NcButton
            >

            <NcModal
              v-if="showConfig"
              @close="showConfig = false"
            >
              <div class="modal__content">
                <p style="margin-bottom: 5px">{{ trans('Configuration:') }}</p>
                <textarea
                  class="config"
                  readonly
                  >{{ filterConfig(config) }}</textarea
                >

                <div class="modal__footer">
                  <NcButton
                    variant="secondary"
                    @click="copyConfig"
                  >
                    <span v-if="configCopied">{{ trans('Done!') }}</span>
                    <span v-else>{{ trans('Copy') }}</span>
                  </NcButton>
                  <NcButton
                    variant="primary"
                    @click="showConfig = false"
                  >
                    {{ t('side_menu', 'Close') }}
                  </NcButton>
                </div>
              </div>
            </NcModal>
          </TableValue>
        </TableRow>
      </TableContainer>
    </NcAppContent>
  </NcContent>
</template>

<script setup>
import { NcContent, NcAppContent, NcButton, NcModal } from '@nextcloud/vue'
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js'

import MenuDisplay from '../components/settings/MenuDisplay'
import TableContainer from '../components/settings/TableContainer'
import TableRow from '../components/settings/TableRow'
import TableLabel from '../components/settings/TableLabel'
import TableValue from '../components/settings/TableValue'
import SectionTitle from '../components/settings/SectionTitle'
import FormRange from '../components/settings/form/FormRange'
import FormColorPicker from '../components/settings/form/FormColorPicker'
import FormOpener from '../components/settings/form/FormOpener'
import FormSelect from '../components/settings/form/FormSelect'
import FormYesNo from '../components/settings/form/FormYesNo'
import FormSize from '../components/settings/form/FormSize'
import FormAppPicker from '../components/settings/form/FormAppPicker'

const menu = [
  { label: 'Global', section: 'global' },
  { label: 'Panel', section: 'panel' },
  { label: 'Applications', section: 'apps' },
  { label: 'Colors', section: 'colors' },
  { label: 'Opener', section: 'opener' },
  { label: 'Top menu', section: 'topMenu' },
  { label: 'Support', section: 'support' },
]

const config = ref(null)
const showConfig = ref(false)
const configCopied = ref(false)
const configStore = useConfigStore()
const section = ref(menu[0].section)

const setSection = (value) => {
  section.value = value
}

const trans = (value) => {
  return t('side_menu', value)
}

const sectionClass = (value) => {
  return {
    hidden: value !== section.value,
  }
}

const copyConfig = () => {
  navigator.clipboard.writeText(JSON.stringify(filterConfig(config.value), null, 2))

  configCopied.value = true

  window.setTimeout(() => {
    configCopied.value = false
  }, 2000)
}

const filterConfig = (value) => {
  const result = {}

  for (let key in value) {
    if (['cache-categories', 'cache'].includes(key) === false) {
      result[key] = value[key]
    }
  }

  return result
}

onMounted(async () => {
  config.value = await configStore.getAppConfig()
})
</script>

<style scoped>
.hidden {
  display: none;
}

.button-inline button {
  display: inline-block;
  margin-right: 5px;
}

.config {
  width: 100%;
  height: 30vh;
}

.modal__content {
  padding: 20px;
}

.modal__footer {
  margin-top: 20px;
  text-align: right;
}

.modal__footer button {
  display: inline-block;
  margin-right: 5px;
}
</style>
