import Delete from '@/components/Delete'
import Details from '@/components/Details'
import Supports from '@/components/Supports'
import NavBtn from '@/components/NavBtn'
import Payment from '@/components/Payment'
import { globalActions } from '@/store/globalSlices'
import { CharityStruct, RootState, SupportStruct } from '@/utils/type.dt'
import { GetServerSidePropsContext, NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import Donor from '@/components/Donor'
import { getAdmin, getCharity, getSupporters } from '@/services/blockchain'
import Ban from '@/components/Ban'

interface PageProps {
  charityData: CharityStruct
  supportsData: SupportStruct[]
  owner: string
}

const Page: NextPage<PageProps> = ({ charityData, supportsData, owner }) => {
  const { charity, supports } = useSelector((states: RootState) => states.globalStates)
  const dispatch = useDispatch()
  const { setCharity, setSupports, setOwner } = globalActions

  useEffect(() => {
    dispatch(setOwner(owner))
    dispatch(setCharity(charityData))
    dispatch(setSupports(supportsData))
  }, [dispatch, setCharity, charityData, setSupports, supportsData])

  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <Head>
        <title>Charity | {charity?.name}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="h-10"></div>
      <div className="h-10"></div>
      <div className="h-10"></div>

      {charity && (
        <div
          className="flex flex-col sm:flex-row sm:justify-between items-start
          lg:w-2/3 w-full mx-auto space-y-4 sm:space-y-0 sm:space-x-10 my-10 px-8 sm:px-0"
        >
          <Details supports={supports} charity={charity} />
          <Payment owner={owner} supports={supports.slice(0, 4)} charity={charity} />
        </div>
      )}

      {charity && (
        <>
          <Delete charity={charity} />
          <Donor charity={charity} />
          <Ban charity={charity} />
          <Supports supports={supports} />
          <NavBtn owner={charity?.owner} donationId={Number(id)} />
        </>
      )}
    </div>
  )
}

export default Page

export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const { id } = context.query

  const owner: string = await getAdmin()
  const charityData: CharityStruct = await getCharity(Number(id))
  const supportsData: SupportStruct[] = await getSupporters(Number(id))
  return {
    props: {
      owner: JSON.parse(JSON.stringify(owner)),
      charityData: JSON.parse(JSON.stringify(charityData)),
      supportsData: JSON.parse(JSON.stringify(supportsData)),
    },
  }
}