/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./users-invest.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import { useEffect, useState } from "react"
import UsersInvestmentPlans from "@/components/admin/UsersInvestmentPlans"
import AddInvestmentModal from "@/components/admin/Modals/AddInvestmentToUserModal"

const UsersInvestments = ({ investments }: any) => {
  const [toggleActive, setToggleActive] = useState(1)
  const [addModal, setAddModal] = useState(false)
  const [loading, setLoading] = useState(true)

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

  const toggleActiveState = (key: number) => {
    setToggleActive(key)
  }

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

  const users = [
    { id: 1, name: 'Alice Johnson' },
    { id: 2, name: 'Bob Smith' },
    { id: 3, name: 'Carla Williams' },
    { id: 4, name: 'David Brown' },
    { id: 5, name: 'Emily Davis' },
    { id: 6, name: 'Frank Miller' },
    { id: 7, name: 'Grace Wilson' },
    { id: 8, name: 'Henry Moore' },
    { id: 9, name: 'Isabella Taylor' },
    { id: 10, name: 'Jack Anderson' },
    { id: 11, name: 'Kylie Thomas' },
    { id: 12, name: 'Leo Jackson' },
    { id: 13, name: 'Mia White' },
    { id: 14, name: 'Noah Harris' },
    { id: 15, name: 'Olivia Martin' },
  ];

  return (
    <>
    { addModal ? <AddInvestmentModal closeModal={toggleAddModal} users={users} /> : null }
    <div className={styles["invests"]}>
      <PageIntro
        title="Trading invests & Investments"
        description="Manage trading invests and investment opportunities."
      />
      <div className={styles["invests__tab"]}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1 ? styles["invests__tab--item--active"] : styles["invests__tab--item"]
          }
        >
          Users Investments
        </div>
        {/* <div
          onClick={ toggleAddModal }
          className={
            toggleActive === 2 ? styles["invests__tab--item--active"] : styles["invests__tab--item"]
          }
        >
          Add Investment Plan To User
        </div> */}
      </div>

      <div className={styles["invests__content"]}>
        {toggleActive === 1 && (
          <UsersInvestmentPlans plans={investments} />
        )}
      </div>
    </div>
    </>
  )
}

UsersInvestments.layout = (page: React.ReactNode) => (
  <AdminDashboardLayout title="Users Investments" children={page} />
)

export default UsersInvestments