import { useState, memo, useEffect } from 'react'
import { hiddenList, visibleList } from '@app/stylesheets/list.module.css'
import { Analytic } from '@app/types'
import { ListCellAnalyticsHeader } from './analytics-header'
import { FetchIssue } from './fetch-issue'
import { Skeleton } from '@app/components/placeholders/skeleton'
import { classNames } from '@app/utils/classes'
import Head from 'next/head'

// return issues maped
const AnalyticsWrapper = ({
  errorCount,
  warningCount,
  totalIssues,
  domain,
  pageUrl,
  open: defaultOpen,
  totalErrors,
}: Analytic & {
  open?: boolean
  small?: boolean
  singleRow?: boolean
  totalErrors: number
}) => {
  const [visible, setVisible] = useState<boolean>(!!defaultOpen)
  const [loaded, setLoaded] = useState<boolean>(false)

  useEffect(() => {
    if (visible && !loaded) {
      setLoaded(true)
    }
  }, [visible, loaded, setLoaded])

  const errorPercentage = (
    Math.ceil((((errorCount || 1) / (totalErrors || 1)) * 100) / 5) * 5
  ).toFixed(0)

  const dynamicErrorClassName = `w-${errorPercentage}-after`

  return (
    <>
      <Head>
        <style key={dynamicErrorClassName}>
          {`.${dynamicErrorClassName}::after {
          width: calc(${errorPercentage}% + 2.6rem);
        }`}
        </style>
      </Head>
      <li
        className={classNames(
          'list-none row-bg relative',
          dynamicErrorClassName
        )}
      >
        <ListCellAnalyticsHeader
          url={pageUrl}
          totalIssues={totalIssues}
          setVisible={setVisible}
          visible={visible}
          warningCount={warningCount}
          errorCount={errorCount}
          domain={domain as string}
        />
        <div
          aria-hidden={!visible}
          className={`${visible ? 'visible' : 'hidden'} rounded-b ${
            visible ? visibleList : hiddenList
          }`}
        >
          {loaded ? (
            <FetchIssue url={pageUrl} />
          ) : (
            <Skeleton className='w-full h-30' />
          )}
        </div>
      </li>
    </>
  )
}

// memo expensive issues
export const AnalyticsList = memo(AnalyticsWrapper)
