import type { ReactElement } from 'react'
import type { Context } from '../types'
// @ts-ignore
import { ServerStyleSheets } from '@material-ui/core/styles'

const key = 'jss-server-side'

function ssrCollector(context: Context) {
  const sheet = new ServerStyleSheets()

  return {
    collect(app: ReactElement) {
      //@ts-ignore
      return sheet.collect(app)
    },
    toString() {
      let css = sheet.toString()

      // @ts-ignore
      if (import.meta.env.PROD) {
        css = css.replace(/\s{2,}/gm, ' ')
      }

      return `<style id="${key}">${css}</style>`
    },
  }
}

function clientProvider(context: Context) {
  return {
    cleanup() {
      setTimeout(() => {
        const el = document.querySelector(`#${key}`)
        el && el.parentElement && el.parentElement.removeChild(el)
      })
    },
  }
}

// @ts-ignore
export default import.meta.env.SSR ? ssrCollector : clientProvider