/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './acc-types.module.scss'
import AdminDashboardLayout from '@/layouts/admin_layout'
import PageIntro from '@/components/dashboard/PageIntro'
import { useState, useEffect } from 'react'
import AccountPlanCard from '@/components/dashboard/AccountPlanCard'
import CreateAccountTypeModal from '@/components/admin/Modals/CreateAccountTypeModal'
import NoResults from '@/components/dashboard/NoResults'

const Upgrade = ({ accountsTypes }: any) => {
  const [loading, setLoading] = useState(true)
  const [addModal, setAddModal] = useState(false)


  const toggleAddModal = () => setAddModal(!addModal)

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 2000)
    return () => clearTimeout(timer)
  }, [])

  const isEmpty =
    !loading &&
    (!accountsTypes ||
      !accountsTypes.data ||
      accountsTypes.data.length === 0)

  return (
    <>
      {addModal && (
        <CreateAccountTypeModal type="add" closeModal={toggleAddModal} />
      )}

      <div className={styles['upgrade']}>
        <PageIntro
          title="Account Upgrade"
          description="Purchase trading signals by expert traders to improve your win probabilities"
        />

        <div
          onClick={toggleAddModal}
          className={styles['upgrade--account']}
        >
          Add New Account Type
        </div>

        <div className={styles['upgrade--plans']}>

          <div className={styles['upgrade--plans--plans']}>
            {loading ? (
              <>
                {[1, 2, 3].map((n) => (
                  <div key={n} className={styles['plan-card-skeleton']}>
                    <div className={styles['plan-card-skeleton__header']} />
                    <div className={styles['plan-card-skeleton__subtext']} />
                    <div className={styles['plan-card-skeleton__price']} />
                    <ul className={styles['plan-card-skeleton__features']}>
                      <li />
                      <li />
                      <li />
                      <li />
                    </ul>
                    <div className={styles['plan-card-skeleton__button']} />
                  </div>
                ))}
              </>
            ) : (
              accountsTypes?.data?.map((plan: any) => (
                <AccountPlanCard key={plan.id} plan={plan} />
              ))
            )}
          </div>

          {isEmpty && (
            <NoResults
              title="No Account Types"
              description="You currently do not have any account types at the moment"
            />
          )}
        </div>
      </div>
    </>
  )
}

Upgrade.layout = (page: React.ReactNode) => (
  <AdminDashboardLayout children={page} title="Account types" />
)

export default Upgrade