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

"use client"

import { useState, useEffect } from "react"
import { router } from "@inertiajs/react"

import styles from "./events.module.scss"

import UserDashboardLayout from "@/layouts/user_dashboard_layout"

import PageIntro from "@/components/dashboard/PageIntro"
import MyEvents from "@/components/dashboard/MyEvents"
import EventCard from "@/components/dashboard/EventCard"
import NoResults from "@/components/dashboard/NoResults"

import Pagination from "@/components/shared/Pagination"

const EventSkeleton = () => {
  return (
    <div className={styles.eventSkeleton}>
      <div className={styles.eventSkeleton__image}>
        <div className={styles.eventSkeleton__badge} />
      </div>

      <div className={styles.eventSkeleton__body}>
        <div className={styles.eventSkeleton__title} />

        <div className={styles.eventSkeleton__text} />
        <div className={styles.eventSkeleton__textShort} />

        <div className={styles.eventSkeleton__meta} />
        <div className={styles.eventSkeleton__meta} />
        <div className={styles.eventSkeleton__metaShort} />

        <div className={styles.eventSkeleton__progress} />

        <div className={styles.eventSkeleton__buttons}>
          <div
            className={
              styles.eventSkeleton__button
            }
          />

          <div
            className={
              styles.eventSkeleton__buttonSecondary
            }
          />
        </div>
      </div>
    </div>
  )
}

const Events = ({
  events,
  myEvents,
}: any) => {
  const [activeTab, setActiveTab] =
    useState(1)

  const [loading, setLoading] =
    useState(true)

  const handlePageChange = (
    url: string
  ) => {
    if (!url) return

    router.visit(url, {
      preserveScroll: true,
      preserveState: true,
    })
  }

  const toggleTab = (
    tab: number
  ) => {
    setActiveTab(tab)

    if (tab === 1) {
      setLoading(true)
    }
  }

  useEffect(() => {
    if (activeTab !== 1) {
      setLoading(false)
      return
    }

    const timer = setTimeout(() => {
      setLoading(false)
    }, 1500)

    return () => clearTimeout(timer)
  }, [activeTab])

  return (
    <div className={styles.events}>
      <PageIntro
        title="Events"
        description="Join live trading events, webinars, workshops and community sessions hosted by TraderPlus."
      />

      {/* =====================================
          TABS
      ===================================== */}

      <div className={styles.events__tabs}>
        <button
          type="button"
          onClick={() => toggleTab(1)}
          className={
            activeTab === 1
              ? styles.events__tabActive
              : styles.events__tab
          }
        >
          Event Schedules
        </button>

        <button
          type="button"
          onClick={() => toggleTab(2)}
          className={
            activeTab === 2
              ? styles.events__tabActive
              : styles.events__tab
          }
        >
          My Tickets
        </button>
      </div>

      {/* =====================================
          MY EVENTS
      ===================================== */}

      {activeTab === 2 ? (
        <MyEvents myEvents={myEvents} />
      ) : (
        <>
          {/* =====================================
              LOADING
          ===================================== */}

          {loading ? (
            <div
              className={
                styles.events__grid
              }
            >
              {Array.from({
                length: 6,
              }).map((_, index) => (
                <EventSkeleton
                  key={index}
                />
              ))}
            </div>
          ) : !events?.data ||
            events?.data?.length ===
              0 ? (
            <div
              className={
                styles.events__empty
              }
            >
              <NoResults
                title="No Events"
                description="There are currently no events available at the moment."
              />
            </div>
          ) : (
            <>
              {/* =====================================
                  EVENTS GRID
              ===================================== */}

              <div
                className={
                  styles.events__grid
                }
              >
                {events?.data?.map(
                  (event: any) => (
                    <EventCard
                      key={event.id}
                      event={event}
                    />
                  )
                )}
              </div>

              {/* =====================================
                  PAGINATION
              ===================================== */}

              {events?.links &&
                events?.data?.length >
                  0 && (
                  <div
                    className={
                      styles.events__pagination
                    }
                  >
                    <Pagination
                      links={
                        events.links
                      }
                      onChange={
                        handlePageChange
                      }
                    />
                  </div>
                )}
            </>
          )}
        </>
      )}
    </div>
  )
}

Events.layout = (
  page: React.ReactNode
) => (
  <UserDashboardLayout
    title="Events"
  >
    {page}
  </UserDashboardLayout>
)

export default Events