import { createRoot } from 'react-dom/client'
import LandingPage from './LandingPage'
import OrderDetails from './OrderDetails'
import { I18nProvider } from '@wordpress/react-i18n'
import OrderList from './OrderList'
import { addFilter } from '@wordpress/hooks'
import Settings from './Settings'
import Faq from './Faq'
import Deactivate from './Deactivate'

const MainPage = () => (
  <I18nProvider i18n={wp.i18n}>
    <LandingPage />
  </I18nProvider>
)

const SettingsPage = () => (
  <I18nProvider i18n={wp.i18n}>
    <Settings />
  </I18nProvider>
)

const FaqPage = () => (
  <I18nProvider i18n={wp.i18n}>
    <Faq />
  </I18nProvider>
)

addFilter('woocommerce_admin_pages_list', 'posten-bring-checkout', pages => {
  pages.push({
    container: MainPage,
    path: '/posten-bring-checkout',
    breadcrumbs: ['Posten Bring Checkout'],
    capability: 'manage_woocommerce',
    nav_args: {
      id: 'posten-bring-checkout',
    },
  })
  pages.push({
    container: SettingsPage,
    path: '/posten-bring-checkout/settings',
    breadcrumbs: ['Posten Bring Checkout'],
    capability: 'manage_options',
    nav_args: {
      id: 'posten-bring-checkout-settings',
      parent: 'posten-bring-checkout',
    },
  })
  pages.push({
    container: FaqPage,
    path: '/posten-bring-checkout/faq',
    breadcrumbs: ['Posten Bring Checkout'],
    capability: 'manage_woocommerce',
    nav_args: {
      id: 'posten-bring-checkout-faq',
      parent: 'posten-bring-checkout',
    },
  })
  return pages
})

const mountOrderDetails = container => {
  const root = createRoot(container)
  root.render(
    <I18nProvider i18n={wp.i18n}>
      <OrderDetails />
    </I18nProvider>
  )
}

// The container might be reloaded via ajax if order item list is modified or recalculated. When that happens we have to remount
const observeOrderDetailsContainerChanges = () => {
  const observer = new MutationObserver(mutations => {
    const containerRefreshed = mutations
      .filter(mutation => mutation.addedNodes.length)
      .map(mutation => Array.from(mutation.addedNodes))
      .find(
        nodes =>
          !!nodes.find(
            node =>
              node.querySelector &&
              node.querySelector('#posten-bring-checkout-section')
          )
      )

    if (containerRefreshed) {
      const orderDetailsContainer = document.getElementById(
        'posten-bring-checkout-section'
      )
      if (orderDetailsContainer) {
        mountOrderDetails(orderDetailsContainer)
      }
    }
  })

  observer.observe(document.body, { childList: true, subtree: true })
}

const container = document.getElementById('posten-bring-checkout')
const orderDetailsContainer = document.getElementById(
  'posten-bring-checkout-section'
)
const modalContainer = document.getElementById(
  'posten-bring-custom-modal-content'
)
const deactivateModalContainer = document.getElementById(
  'posten-bring-deactivate-modal-content'
)

if (container) {
  const root = createRoot(container)
  root.render(
    <I18nProvider i18n={wp.i18n}>
      <Settings />
    </I18nProvider>
  )
} else if (orderDetailsContainer) {
  mountOrderDetails(orderDetailsContainer)
  observeOrderDetailsContainerChanges()
} else if (modalContainer) {
  const root = createRoot(modalContainer)
  root.render(
    <I18nProvider i18n={wp.i18n}>
      <OrderList />
    </I18nProvider>
  )
} else if (deactivateModalContainer) {
  const root = createRoot(deactivateModalContainer)
  root.render(
    <I18nProvider i18n={wp.i18n}>
      <Deactivate />
    </I18nProvider>
  )
}
