// @flow
import type { EmotionCache } from '@emotion/utils'

const createExtractCriticalToChunks =
  (cache: EmotionCache) => (html: string) => {
    // parse out ids from html
    // reconstruct css/rules/cache to pass
    let RGX = new RegExp(`${cache.key}-([a-zA-Z0-9-_]+)`, 'gm')

    let o = { html, styles: [] }
    let match
    let ids = {}
    while ((match = RGX.exec(html)) !== null) {
      // $FlowFixMe
      if (ids[match[1]] === undefined) {
        // $FlowFixMe
        ids[match[1]] = true
      }
    }

    const regularCssIds = []
    let regularCss = ''

    Object.keys(cache.inserted).forEach(id => {
      if (
        (ids[id] !== undefined ||
          cache.registered[`${cache.key}-${id}`] === undefined) &&
        cache.inserted[id] !== true
      ) {
        if (cache.registered[`${cache.key}-${id}`]) {
          // regular css can be added in one style tag
          regularCssIds.push(id)
          // $FlowFixMe
          regularCss += cache.inserted[id]
        } else {
          // each global styles require a new entry so it can be independently flushed
          o.styles.push({
            key: `${cache.key}-global`,
            ids: [id],
            css: cache.inserted[id]
          })
        }
      }
    })

    // make sure that regular css is added after the global styles
    o.styles.push({ key: cache.key, ids: regularCssIds, css: regularCss })

    return o
  }

export default createExtractCriticalToChunks