<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { ref } from 'vue'
import { getI18n } from '@/helper'
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '@/stores/settings-store'
import { Header } from '@/apps/partials'
import ParentTabs from "@/apps/settings/components/ParentTabs.vue"

const infoData = {
  title: getI18n('wishlist_settings', __( 'Wishlist Settings', 'saveto-wishlist-lite-for-woocommerce' )),
  description: getI18n('wishlist_settings_description', __( 'Configure your wishlist preferences and behavior', 'saveto-wishlist-lite-for-woocommerce' )),
}

const settingsStore = useSettingsStore()
const {
  isLoading,
} = storeToRefs(settingsStore)

const handleFormSubmit = ref<any>(null)

const handleSubmit = () => {
  handleFormSubmit.value.onSubmit()
}

</script>

<template>
  <div class="stwlite-tw-bg-gray-50">
    <Header
      :infoData="infoData"
      :showButton="true"
      :buttonText="getI18n('submitText', __('Save Changes', 'saveto-wishlist-lite-for-woocommerce'))"
      :buttonLoadingText="getI18n('saving', __('Saving...', 'saveto-wishlist-lite-for-woocommerce'))"
      @trigger-button="handleSubmit"
      :isLoading="isLoading"
    />

    <ParentTabs ref="handleFormSubmit" />
  </div>
</template>
