<template>
  <div class="confucius__container">
    <Banner page="confucius" :background-color="$_theme('colorSecondary')" />

    <TwoColumnsLayout :separator="false" columns-template="2fr 8fr">
      <template #sidebar>
        <div class="confucius-left-panel p-l">
          <ul>
            <li>
              <a
                :class="{ active: activeItem === 'homepage' }"
                @click.prevent="changePanel('homepage')"
              >
                <IconText :color="$_theme('colorSecondary')" icon="arrow-right">
                  {{ $_tr('homepage') }}
                </IconText>
              </a>
            </li>

            <li>
              <a
                :class="{ active: activeItem === 'edition' }"
                @click.prevent="changePanel('edition')"
              >
                <IconText :color="$_theme('colorSecondary')" icon="arrow-right">
                  {{ $_tr('publishArticle') }}
                </IconText>
              </a>
            </li>

            <li>
              <a
                :class="{ active: activeItem === 'archives' }"
                @click.prevent="changePanel('archives')"
              >
                <IconText :color="$_theme('colorSecondary')" icon="arrow-right">
                  {{ $_tr('archives') }}
                </IconText>
              </a>
            </li>
          </ul>
        </div>
      </template>

      <template #main>
        <div class="confucius-right-panel px-3xl">
          <transition-group name="fadeIn" mode="out-in">
            <div
              v-if="panel === 'homepage'"
              key="homepage"
              class="confucius-container"
            >
              <div class="home">
                <Title tag="h3">
                  {{ $_tr('welcomeMobileApplicationAdministration') }}
                </Title>

                <div class="confucius-actions mt-l">
                  <a @click.prevent="changePanel('edition')">
                    + {{ $_tr('publishArticle') }}
                  </a>

                  <a @click.prevent="changePanel('archives')">
                    {{ $_tr('seeArchive') }}
                  </a>
                </div>
              </div>
            </div>

            <div v-if="panel === 'edition'" key="edition">
              <EditionForm
                :content="content"
                :is-edit="isEdit"
                :is-duplicate="false"
              />
            </div>

            <div v-if="panel === 'archives'" key="archives">
              <div class="archives-top">
                <Title tag="h3">{{ $_tr('publicationsArchive') }}</Title>

                <a @click.prevent="changePanel('edition')">
                  + {{ $_tr('publishArticle') }}
                </a>
              </div>

              <ConfuciusListing />
            </div>
          </transition-group>
        </div>
      </template>
    </TwoColumnsLayout>
  </div>
</template>

<script>
import { IconText, Title } from 'inside-collection/atoms'

import Banner from '@inside-library/components/commons/components/lib/Banner'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'
import EditionForm from '@inside-edition/components/EditionForm'

import checkConfuciusAccess from '../../mixins/check-manager-access'

import ConfuciusListing from '../../components/confucius/ConfuciusListing'

export default {
  name: 'ConfuciusPage',
  $_i18nRootPath: 'customs.CONFUCIUS',
  components: {
    IconText,
    Title,
    Banner,
    TwoColumnsLayout,
    EditionForm,
    ConfuciusListing
  },
  mixins: [checkConfuciusAccess],
  data() {
    return {
      panel: 'homepage',
      isEdit: false,
      content: 'article_blog',
      activeItem: 'homepage'
    }
  },
  beforeMount() {
    if (!this.$_checkConfuciusAccess) {
      this.$router.push({ name: 'HomePage' })
    }

    this.getSchemaData()
  },
  methods: {
    changePanel(panel) {
      if (panel === 'edition') {
        this.getSchemaData()
      }
      this.panel = panel
      this.activeItem = panel
    },
    getSchemaData() {
      /*
       * Make request to build form
       */
      const uuid = this.$route.params.uuid

      let url = `form/${this.content}`

      if (uuid) {
        url = `${url}/${uuid}`
        this.isEdit = true
      }

      this.get(url).then(result => {
        if (result.status === 200) {
          /*
           * Get schema for the current content type
           */
          this.setStoreAction('setSchemasField', result?.data?.data)
          this.setStoreAction('setEditableLang', result?.data?.langcode)
        } else {
          this.hasError = true
        }

        this.isLoading = false
      })
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.confucius__container {
  .confucius-left-panel {
    height: 100%;
    box-shadow: var(--shadow-default);

    ul {
      li {
        margin-bottom: var(--spacing-xs);

        a {
          display: block;
          cursor: pointer;
          padding: var(--spacing-s) var(--spacing-l);
          border-radius: var(--radius-l);
          font-size: var(--font-size-labor);

          @include transition(0.3s);

          .ds-icon-container {
            margin-right: var(--spacing-s);

            @include transition(0.3s);
          }

          &.active,
          &:hover {
            color: var(--color-light);
            background: var(--color-secondary);

            .ds-icon-container {
              fill: var(--color-light) !important;
            }
          }
        }
      }
    }
  }

  .confucius-right-panel {
    .confucius-container {
      min-height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url('../../assets/img/confucius.jpg') no-repeat center center;
      background-size: cover;
    }

    .home {
      width: 325px;

      h3 {
        font-weight: var(--font-weight-normal);
      }
    }

    .archives-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-l);

      a {
        display: inline-block;
        padding: var(--spacing-s) var(--spacing-m);
        color: var(--color-secondary);
        font-size: var(--font-size-labor);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        text-align: right;
        border: solid var(--color-secondary) 1px;
        border-radius: var(--radius-l);
      }
    }

    .confucius-actions {
      display: flex;
      justify-content: space-between;

      a {
        display: inline-block;
        padding: var(--spacing-s) var(--spacing-m);
        color: var(--color-secondary);
        font-size: var(--font-size-labor);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        border: solid var(--color-secondary) 1px;
        border-radius: var(--radius-l);
      }
    }

    .toggle-ui__container--active {
      background: var(--color-secondary) !important;
    }
  }

  .filters {
    justify-content: flex-start;

    > div {
      max-width: 300px;
    }
  }
}
</style>
