import { useQuery } from '@apollo/client'
import { getGetServerSideProps } from '@/api/ssrApollo'
import Layout from '@/components/layout'
import { USER_STATS } from '@/fragments/users'
import { useRouter } from 'next/router'
import PageLoading from '@/components/page-loading'
import dynamic from 'next/dynamic'
import { numWithUnits } from '@/lib/format'
import { UsageHeader } from '@/components/usage-header'
import { SatisticsHeader } from '..'
import { WhenComposedChartSkeleton, WhenAreaChartSkeleton } from '@/components/charts-skeletons'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Tooltip from 'react-bootstrap/Tooltip'

export const getServerSideProps = getGetServerSideProps({ query: USER_STATS, authRequired: true })

const WhenAreaChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenAreaChart), {
  loading: () => <WhenAreaChartSkeleton />
})
const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), {
  loading: () => <WhenComposedChartSkeleton />
})

const SatisticsTooltip = ({ children, overlayText }) => {
  return (
    <OverlayTrigger
      placement='bottom'
      overlay={
        <Tooltip>
          {overlayText}
        </Tooltip>
      }
    >
      <span>
        {children}
      </span>
    </OverlayTrigger>
  )
}

export default function Satistics ({ ssrData }) {
  const router = useRouter()
  const { when, from, to } = router.query

  const { data } = useQuery(USER_STATS, { variables: { when, from, to } })
  if (!data && !ssrData) return <PageLoading />
  const { userStatsActions, userStatsIncomingSats, userStatsOutgoingSats } = data || ssrData

  const totalStacked = userStatsIncomingSats.reduce((total, a) => total + a.data?.reduce((acc, d) => acc + d.value, 0), 0)
  const totalSpent = userStatsOutgoingSats.reduce((total, a) => total + a.data?.reduce((acc, d) => acc + d.value, 0), 0)
  const totalEngagement = userStatsActions.reduce((total, a) => total + a.data?.reduce((acc, d) => acc + d.value, 0), 0)

  return (
    <Layout>
      <div className='mt-2'>
        <SatisticsHeader />
        <div className='tab-content' id='myTabContent'>
          <div className='tab-pane fade show active text-muted' id='statistics' role='tabpanel' aria-labelledby='statistics-tab'>
            <UsageHeader pathname='satistics/graphs' />
            <div className='mt-3'>
              <div className='d-flex row justify-content-between'>
                <div className='col-md-4 mb-2'>
                  <h4>stacked</h4>
                  <div className='card'>
                    <div className='card-body'>
                      <SatisticsTooltip overlayText={numWithUnits(totalStacked, { abbreviate: false, format: true })}>
                        <h2 className='text-center text-nowrap mb-0 text-muted'>
                          {numWithUnits(totalStacked, { abbreviate: true, format: true })}
                        </h2>
                      </SatisticsTooltip>
                    </div>
                  </div>
                </div>
                <div className='col-md-4 mb-2'>
                  <h4>spent</h4>
                  <div className='card'>
                    <div className='card-body'>
                      <SatisticsTooltip overlayText={numWithUnits(totalSpent, { abbreviate: false, format: true })}>
                        <h2 className='text-center text-nowrap mb-0 text-muted'>
                          {numWithUnits(totalSpent, { abbreviate: true, format: true })}
                        </h2>
                      </SatisticsTooltip>
                    </div>
                  </div>
                </div>
                <div className='col-md-4'>
                  <h4>actions</h4>
                  <div className='card'>
                    <div className='card-body'>
                      <h2 className='text-center mb-0 text-muted'>
                        {new Intl.NumberFormat().format(totalEngagement)}
                      </h2>
                    </div>
                  </div>
                </div>
              </div>
              <div className='row mt-5'>
                {userStatsIncomingSats.length > 0 &&
                  <div className='col-md-6'>
                    <div className='text-center text-muted fw-bold'>stacking</div>
                    <WhenAreaChart data={userStatsIncomingSats} />
                  </div>}
                {userStatsOutgoingSats.length > 0 &&
                  <div className='col-md-6'>
                    <div className='text-center text-muted fw-bold'>spending</div>
                    <WhenAreaChart data={userStatsOutgoingSats} />
                  </div>}
              </div>
              <div className='row mt-5'>
                {userStatsActions.length > 0 &&
                  <div className='col-md-12'>
                    <div className='text-center text-muted fw-bold'>items</div>
                    <WhenComposedChart data={userStatsActions} areaNames={['posts', 'comments']} areaAxis='left' lineNames={['territories', 'referrals']} lineAxis='right' />
                  </div>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}