/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from "./admin-settings.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import { useState } from "react"
import WebsiteSettings from "@/components/admin/WebsiteSettings"
import PaymentSettings from "@/components/admin/PaymentSettings"
// import WebsitePreferences from "@/components/admin/WebsitePreferences"

const Settings = ({ settings, methods }: any) => {
  const [toggleActive, setToggleActive] = useState(1)

  console.log("ADMIN Settings - ",settings)

  //Toggle Active State
  const toggleActiveState = (key: any) => {
    setToggleActive(key)
  }

  return (
    <div className={styles["settings"]}>
      <PageIntro
        title="App Settings"
        description="Provide app wide application settings and configurations here."
      />
      <div className={styles["settings__tab"]}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1
              ? styles["settings__tab--item--active"]
              : styles["settings__tab--item"]
          }
        >
          Website Settings
        </div>

        <div
          onClick={() => toggleActiveState(2)}
          className={
            toggleActive === 2
              ? styles["settings__tab--item--active"]
              : styles["settings__tab--item"]
          }
        >
          Payment Settings
        </div>

        {/* <div
          onClick={() => toggleActiveState(3)}
          className={
            toggleActive === 3
              ? styles["settings__tab--item--active"]
              : styles["settings__tab--item"]
          }
        >
          Preferences
        </div> */}
      </div>

      <div className={styles["settings__children"]}>
        {toggleActive === 1 ? (
          <WebsiteSettings settings={ settings } />
        ) : toggleActive === 2 ? (
          <PaymentSettings methods={methods} />
        ) : (
          // <WebsitePreferences settings={ settings } />
          ""
        )}
      </div>
    </div>
  )
}

Settings.layout = (page: React.ReactNode) => (
  <AdminDashboardLayout title="App Settings & Configurations" children={page} />
)

export default Settings