import type { Plugin } from 'postcss'

const vars = [
  'safe-area-inset-top',
  'safe-area-inset-bottom',
  'safe-area-inset-left',
  'safe-area-inset-right',
]

const expr = new RegExp(`env\\(\\s*(${vars.join('|')})\\s*,?\\s*([^)]+)?\\s*\\)`, 'g')

const PostcssSafeAreaPlugin = (): Plugin => {
  return {
    postcssPlugin: 'postcss-safe-area',
    Declaration(decl) {
      const fallback = decl.value.replace(expr, (match, param, defaultValue) => defaultValue || '0')
      if (fallback !== decl.value) {
        decl.cloneBefore({ value: fallback })
      }
    },
  }
}

export default PostcssSafeAreaPlugin