<template>
  <Page :fetched-data="fetchedData" :image-data="image">
    <template #extra-fields>
      <section class="main-section">
        <Title tag="h4"> {{ $_tr('compliance.title') }} </Title>

        <InputText
          :label="$_tr('compliance.complianceText.label')"
          :default-value="fetchedData.general.compliance_text"
          :form-id="formId"
          model-name="compliance_text"
          class="input-advanced-settings"
        />

        <div class="mt-l">
          <BaseText class="input-title-advanced-settings">
            {{ $_tr('compliance.compliancePicture.title') }}
          </BaseText>

          <AdvancedSettingsInputDropzone
            :default-value="fetchedData.general.compliance_picture"
            :extra-options="{ acceptedFiles: '.png,.jpg,.jpeg,.svg' }"
            :form-id="formId"
            model-name="compliance_picture"
            @onImageUpdate="handleDataImageChange"
          />
        </div>

        <InputText
          :label="$_tr('compliance.complianceRedirection.label')"
          :default-value="fetchedData.general.compliance_redirection"
          :form-id="formId"
          model-name="compliance_redirection"
          class="input-advanced-settings"
        />
      </section>

      <section class="main-section">
        <Title tag="h4"> {{ $_tr('restaurants.title') }} </Title>

        <InputWysiwygTiptap
          :label="$_tr('restaurants.restaurantsSubtitle.label')"
          :default-value="fetchedData.general.restaurants_subtitle"
          :form-id="formId"
          :disabled="[
            'subscript',
            'superscript',
            'image',
            'table',
            'code',
            'fontSize',
            'bulletList',
            'triangularBulletList',
            'codeBlock',
            'color',
            'highlight',
            'hardBreak',
            'listItem',
            'orderedList',
            'eraser'
          ]"
          model-name="restaurants_subtitle"
          class="input-advanced-settings"
        />

        <InputNumber
          :label="$_tr('restaurants.restaurantsClosedHour.label')"
          :default-value="fetchedData.general.restaurants_closed_hour"
          :form-id="formId"
          model-name="restaurants_closed_hour"
          class="input-advanced-settings"
        />

        <div class="mt-l">
          <BaseText class="input-title-advanced-settings">
            {{ $_tr('restaurants.restaurantsFormPicture.title') }}
          </BaseText>

          <AdvancedSettingsInputDropzone
            :default-value="fetchedData.general.restaurants_form_picture"
            :extra-options="{ acceptedFiles: '.png,.jpg,.jpeg,.svg' }"
            :form-id="formId"
            model-name="restaurants_form_picture"
            @onImageUpdate="handleDataImageChange"
          />
        </div>

        <InputCheckbox
          :default-value="
            JSON.parse(fetchedData.general.restaurants_available_days)
          "
          :input-data="days"
          :label="$_tr('restaurants.restaurantsAvailableDays.label')"
          :callback="value => JSON.stringify(value)"
          :form-id="formId"
          model-name="restaurants_available_days"
          class="input-advanced-settings"
        />
      </section>

      <section class="main-section">
        <Title tag="h4"> {{ $_tr('reservations.title') }} </Title>

        <InputTextarea
          :label="$_tr('reservations.reservationsDisclaimer.label')"
          :default-value="fetchedData.general.reservations_disclaimer"
          :form-id="formId"
          model-name="reservations_disclaimer"
          class="input-advanced-settings"
        />
      </section>

      <section class="main-section">
        <InputText
          :label="$_tr('spacesFormPath.label')"
          :default-value="fetchedData.general.spaces_form_path"
          :form-id="formId"
          model-name="spaces_form_path"
          class="input-advanced-settings"
        />
      </section>
    </template>
  </Page>
</template>

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

import Page from '@inside-administration/components/pages/advanced-settings/AdminAdvancedSettingsIdentityPage'
import AdvancedSettingsInputDropzone from '@inside-administration/components/lib/advanced-settings/AdvancedSettingsInputDropzone'

import InputText from '@inside-forms/displays/sub-components/fields/InputText'
import InputWysiwygTiptap from '@inside-forms/displays/sub-components/fields/InputWysiwygTiptap'
import InputNumber from '@inside-forms/displays/sub-components/fields/InputNumber'
import InputCheckbox from '@inside-forms/displays/sub-components/fields/InputCheckbox'
import InputTextarea from '@inside-forms/displays/sub-components/fields/InputTextarea'

import { days } from '../../constants'

export default {
  name: 'AdminAdvancedSettingsIdentityPage',
  $_i18nRootPath:
    'administration.PAGES.ADVANCED_SETTINGS.adminAdvancedSettingsIdentityPage',
  components: {
    Title,
    BaseText,
    Page,
    AdvancedSettingsInputDropzone,
    InputText,
    InputWysiwygTiptap,
    InputNumber,
    InputCheckbox,
    InputTextarea
  },
  props: {
    fetchedData: {
      type: Object
    }
  },
  data() {
    return {
      image: {},
      days,
      formId: 'advanced-settings-identity'
    }
  },
  methods: {
    handleDataImageChange(data) {
      this.image = { ...this.image, ...data }
    }
  }
}
</script>
