'use client'

import React, { useEffect, useState } from 'react'
import SideBar from '@/components/dashboard/sideBar/sideBar'
import AccountInfoDetails from '@/components/dashboard/tabs/accountInfos/accountInfoDetails'
import Appointments from '@/components/dashboard/tabs/appointments/appointments'
import Payment from '@/components/dashboard/tabs/payment/payment'
import Review from '@/components/dashboard/tabs/reviews/review'
import SetAvailability from '../availability/availability'
import AddQuestionForm from '@/components/dashboard/tabs/appointmentQuestionnaire/questions'
import { UserInfoType } from '@/components/dashboard/tabs/accountInfos/types'
import IDUpload from '@/components/dashboard/tabs/IDUpload/IDUpload'

// Dashboard component

const Dashboard = ({
  session,
  userInfo,
  appointments,
  timezonee,
  user,
  expert,
  availabilitiess,
  expertInfo,
  reviews,
} : {
  session: any,
  userInfo: UserInfoType,
  appointments: any,
  timezonee: any,
  user: any,
  expert: any,
  availabilitiess: any,
  expertInfo: any,
  reviews: any
}) => {
  const [tab, setTab] = useState('Account Infos')
  const [isOpen, setIsOpen] = useState(false)
  const [isStripeAccountVerified, setStripeAccountVerified] = useState(false)

  useEffect(() => {
    console.log(expertInfo)
    if (
      expertInfo?.StripeAccount?.stripeData.charges_enabled &&
      expertInfo.StripeAccount?.stripeData.payouts_enabled
    ) {
      console.log('STRIPE ACCOUNT VERIFIED')
      setStripeAccountVerified(true)

      console.log('STRIPE ACCOUNT VERIFIED')
      setStripeAccountVerified(true)
    }
  }, [expertInfo])

  // console.log({ expert, availabilitiess, expertInfo, reviews, userInfo })
  // console.log({ expertQWERTYUInfo: expertInfo?.StripeAccount?.stripeData })
  // console.log(isStripeAccountVerified);

  return (
    <div className="flex py-4  ">
      <div
        className={` ${isOpen ? 'w-full' : ' w-[10%]'
          }     md:w-1/5 md:min-w-[20%]`}
      >
        <SideBar
          tab={tab}
          setTab={setTab}
          userInfo={userInfo}
          setIsOpen={setIsOpen}
          isOpen={isOpen}
          isStripeAccountVerified={isStripeAccountVerified}
        />
      </div>

      <div
        className={`   ${isOpen ? 'hidden' : 'w-11/12'
          }  md:flex-1 md:max-w-[1400px] "`}
      >
        {tab === 'Account Infos' ? (
          <AccountInfoDetails userInfo={userInfo} />
        ) : tab === 'Appointments' ? (
          <Appointments
            appointments={appointments}
            userInfo={userInfo}
            expertInfo={expertInfo}
          />
        ) : tab === 'Verify ID' ? (
          <IDUpload
            // appointments={appointments}
            userInfo={userInfo}
            // expertInfo={expertInfo}
          />
        ) : tab === 'Availabilities' ? (
          <SetAvailability
            session={session}
            availabilitiess={availabilitiess || {}}
            expert={expert}
            user={user}
            timezonee={timezonee}
            component="dashboard"
          />
        ) : tab === 'Payment Info' ? (
          <Payment
            session={session}
            expertInfo={expertInfo}
            isStripeAccountVerified={isStripeAccountVerified}
          />
        ) : tab === 'Reviews' ? (
          // @ts-ignore
          <Review reviews={reviews} />
        ) : tab === 'Appointments Questionnaire' ? (
          <AddQuestionForm session={session} userInfo={userInfo} />
        ) : (
          ''
        )}
      </div>
    </div>
  )
}

export default Dashboard