<template>
  <div class="code-markup-doc">
    <template v-if="props.isRus">
      <h3>
        Компонент code-markup
      </h3>

      <p>
        Это самый главный компонент, он служит обёрткой для всех остальных компонентов. Если вы не хотите делать полную установку, то подключить его можно следующим способом:
      </p>

      <code-marcup-example lang="ru" />

      <p>
        Ниже я приведу пример кода и входные параметры. Входные параметры можно менять, что я и советую вам сделать, так будет нагляднее. Если вы открыли данный сайт с компьютера или планшета, то пример кода будет находиться слева, а входные параметры справа. Если вы открыли данный сайт с мобильного телефона, то сначала будут идти входные параметры, а пример кода будет находиться ниже.
      </p>

      <p>
        Итак, данный компонент имеет следующие входные параметры:
      </p>
    </template>

    <template v-if="!props.isRus">
      <h3>
        The code-markup component
      </h3>

      <p>
        This is the most important component, it serves as a wrapper for all other components. If you do not want to do a full installation, then you can connect it in the following way:
      </p>

      <code-marcup-example />

      <p>
        Below I will provide an example of the code and input parameters. The input parameters can be changed, which I advise you to do, so it will be clearer. If you have opened this website from a computer or tablet, the sample code will be on the left and the input parameters on the right. If you have opened this website from a mobile phone, the input parameters will be displayed first, and the sample code will be below.
      </p>

      <p>
        So, this component has the following input parameters:
      </p>
    </template>

    <settings-doc>
      <template #code>
        <code-markup
          :theme="theme"
          :header="header"
          :is-header="isHeader"
          :is-count="isCount"
          :line-count="lineCount"
          :text-bold="textBold"
          :header-bold="headerBold"
          :title="title"
          :successful-text="successfulText"
          :error-text="errorText"
          :code="bookListCode"
        >
          <books-list-body />
        </code-markup>
      </template>
      <template #content="{ nameRow }" >
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>theme</strong> - данный параметр отвечает за тему, которая будет применена к окну с кодом. На данный момент времени я реализовал 2 темы: "darcula" и "monokai". "Darcula", тема по умолчанию, если вы зададите несуществующее название темы, или не зададите данный параметр, то будет применена она. В данном примере я буду выводить темы через "select", но вы можете вставить сюда любое название темы. В таком случае стилизовать компонент нужно будет через следующий класс - "code-markup_theme-${название вашей темы}". Как создать свою тему я опишу ниже.
          </p>

          <p v-if="!props.isRus">
            <strong>theme</strong> - this parameter is responsible for the theme that will be applied to the window with the code. At this point in time, I have implemented 2 themes: "darcula" and "monokai". "Darcula" is the default theme, if you set a non-existent theme name, or do not set this parameter, it will be applied. In this example, I will output themes via "select", but you can insert any theme name here. In this case, you will need to style the component using the following class - "code-markup_theme-${name of your theme}". I will describe how to create my own theme below.
          </p>

          <ui-select
            v-model="theme"
            :options="themeOptions"
          />
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>isHeader</strong> - данный параметр отвечает за отображение заголовка окна с кодом. Если вы собираетесь отображать заголовок, то данный параметр можно не задавать, он по умолчанию равен "true".
          </p>

          <p v-if="!props.isRus">
            <strong>isHeader</strong> - this parameter is responsible for displaying the title of the window with the code. If you are going to display the title, then you do not need to set this parameter, it is set to "true" by default.
          </p>

          <ui-checkbox
            v-model="isHeader"
            value="isHeader"
          >
            {{ isHeader }}
          </ui-checkbox>
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>header</strong> - заголовок окна с кодом. По умолчанию не имеет значения. Для примера я задал значение "BooksList.vue".
          </p>

          <p v-if="!props.isRus">
            <strong>header</strong> is the title of the window with the code. It doesn't matter by default. For example, I set the value to "BooksList.vue".
          </p>

          <ui-input v-model="header" />
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>isCount</strong> - данный параметр отвечает за отображение номера строки. Если его не задать, то строки будут пронумерованы, по умолчанию равен "true".
          </p>

          <p v-if="!props.isRus">
            <strong>isCount</strong> - this parameter is responsible for displaying the row number. If it is not set, the rows will be numbered, the default value is "true".
          </p>

          <ui-checkbox
            v-model="isCount"
            value="isCount"
          >
            {{ isCount }}
          </ui-checkbox>
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>lineCount</strong> - данный параметр отвечает за то, сколько строк отображать. В него нужно передавать числа, если нужно отобразить все строки, то нужно задать значение "auto", или вообще не задавать данный параметр. По умолчанию задано значение "auto". Для примера я задал <span v-once>{{ lineCount }}</span> строк, и сделал интервал вывода от 10 до 65 строк.
          </p>

          <p v-if="!props.isRus">
            <strong>lineCount</strong> - this parameter is responsible for how many lines to display. You need to pass numbers to it, if you want to display all the lines, then you need to set the value to "auto", or not set this parameter at all. The default value is "auto". For example, I set <span v-once>{{ lineCount }}</span> lines, and made an output interval from 10 to 65 lines.
          </p>

          <ui-select
            v-model="lineCount"
            :options="lineCountOptions"
          />
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>textBold</strong> - данный параметр отвечает за "толщину шрифта". По умолчанию задано "false".
          </p>

          <p v-if="!props.isRus">
            <strong>textBold</strong> - this parameter is responsible for the "font thickness". The default value is set to "false".
          </p>

          <ui-checkbox
            v-model="textBold"
            value="textBold"
          >
            {{ textBold }}
          </ui-checkbox>
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>headerBold</strong> - данный параметр отвечает за толщину шрифта заголовка окна с кодом. По умолчанию задано "false".
          </p>

          <p v-if="!props.isRus">
            <strong>headerBold</strong> - this parameter is responsible for the font thickness of the title of the window with the code. The default value is set to "false".
          </p>

          <ui-checkbox
            v-model="headerBold"
            value="headerBold"
          >
            {{ headerBold }}
          </ui-checkbox>
        </div>

        <div :class="nameRow">
          <template v-if="props.isRus">
            <strong>code</strong> - в данный параметр передаётся код, который нужно будет скопировать в буфер обмена. Это может быть как строка, так и объект.
          </template>

          <template v-if="!props.isRus">
            <strong>code</strong> - a code is passed to this parameter, which will need to be copied to the clipboard. It can be either a string or an object.
          </template>
        </div>

        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>title</strong> - подсказка, которая будет появляться при наведении на иконку "скопировать текст". По умолчанию задано значение "Copy code to clipboard". Как правило это нужно для интернационализации.
          </p>

          <p v-if="!props.isRus">
            <strong>title</strong> - a hint that will appear when you hover over the "copy text" icon. The default value is "Copy code to clipboard". As a rule, this is necessary for internationalization.
          </p>

          <ui-input v-model="title" />
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>successfulText</strong> - подсказка, которая будет появляться при наведении на иконку "скопировать текст" после того, как текст будет скопирован. По умолчанию задано значение "The code is copied to the clipboard". Как правило это нужно для интернационализации.
          </p>

          <p v-if="!props.isRus">
            <strong>successfulText</strong> is a hint that will appear when you hover over the "copy text" icon after the text has been copied. The default value is "The code is copied to the clipboard". As a rule, this is necessary for internationalization.
          </p>

          <ui-input v-model="successfulText" />
        </div>
        <div :class="nameRow">
          <p v-if="props.isRus">
            <strong>errorText</strong> - подсказка, которая будет появляться при наведении на иконку "скопировать текст" в случае возникновении ошибки (если текст не получится скопировать). По умолчанию задано значение "An error occurred while copying the code to the clipboard". Как правило это нужно для интернационализации.
          </p>

          <p v-if="!props.isRus">
            <strong>errorText</strong> - a hint that will appear when hovering over the "copy text" icon in case of an error (if the text cannot be copied). By default, the value is set to "An error occurred while copying the code to the clipboard". As a rule, this is necessary for internationalization.
          </p>

          <ui-input v-model="errorText" />
        </div>
      </template>
    </settings-doc>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue';

  import useLang from '@/components/code-examples/uselang.js';
  import { themeOptions } from './hooks/themeOptions.js';

  import SettingsDoc from '@/components/SettingsDoc.vue';

  import CodeMarcupExample from '@/components/code-examples/doc/CodeMarcupExample.vue';
  import BooksListBody from '@/components/code-examples/books/BooksListBody.vue';
  import { bookListCode } from '@/components/code-examples/books/BookListCode.js';

  import UiInput from '@/UI/UIInput.vue';
  import UiCheckbox from '@/UI/UICheckbox.vue';
  import UiSelect from '@/UI/UISelect.vue';

  const props = defineProps({
    isRus: {
      type: Boolean,
      default: false,
    }
  });

  const { codeParam } = useLang({
    lang: props.isRus ? 'ru' : 'en'
  });

  function* bLineCountOptions(from=5, stop=60, step=5) {
    let count = from;

    while (count <= stop) {
      const bVal = count + step;

      yield {
        id: bVal,
        title: bVal
      };

      count = bVal;
    }
  };

  const lineCountOptions = [
    {
      id: 'auto',
      title: 'auto'
    },
    ...bLineCountOptions()
  ];
  
  const textTitle = 'Copy code to clipboard';
  const textSuccessful = 'The code is copied to the clipboard';
  const textError= 'An error occurred while copying the code to the clipboard';

  const header = ref('BooksList.vue');
  const isHeader = ref(true);
  const isCount = ref(true);
  const lineCount = ref(30);
  const textBold = ref(false);
  const headerBold = ref(false);
  const title = ref(textTitle);
  const successfulText = ref(textSuccessful);
  const errorText = ref(textError);
  const theme = ref('darcula');

  watch(codeParam, (val) => {
    title.value = val.title || textTitle;
    successfulText.value = val.successfulText || textSuccessful;
    errorText.value = val.errorText || textError;
  },
  { immediate: true });
</script>

<style lang="scss" scoped></style>