import { browserConfig } from '@flex-development/unipack'
import type { Options } from '@storybook/core-common'
import type { StorybookConfig } from '@storybook/react/types'
import Dotenv from 'dotenv-webpack'
import type { PropItem } from 'react-docgen-typescript'
import type { Component } from 'react-docgen-typescript/lib/parser'
import { loadSync as tsconfigLoad } from 'tsconfig/dist/tsconfig'
import { Configuration } from 'webpack'

/**
 * @file Storybook Configuration
 * @module storybook/main
 * @see https://storybook.js.org/docs/react/configure/overview
 */

const config: StorybookConfig = {
  addons: [
    { name: '@storybook/addon-essentials', options: {} },
    { name: '@whitespace/storybook-addon-html', options: {} },
    { name: '@storybook/addon-a11y', options: {} },
    { name: '@storybook/addon-jest/dist/cjs', options: {} },
    { name: 'chromatic/storybook-addon', options: {} },
    { name: 'storybook-mobile', options: {} }
  ],
  core: {
    builder: 'webpack5'
  },
  features: {
    breakingChangesV7: true,
    buildStoriesJson: true,
    interactionsDebugger: true,
    modernInlineRender: true,
    storyStoreV7: false
  },
  framework: { name: '@storybook/react', options: {} },
  logLevel: 'debug',
  reactOptions: {
    fastRefresh: true,
    strictMode: false
  },
  staticDirs: ['../../../apps/dashboard/public'],
  stories: [
    '../src/index.stories.mdx',
    '../src/blocks/*.stories.mdx',
    '../src/lib/**/**/*.stories.@(mdx|tsx)'
  ],
  typescript: {
    check: true,
    checkOptions: {
      typescript: {
        configFile: process.env.UNIPACK_TSCONFIG,
        memoryLimit: 9999
      }
    },
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      ...tsconfigLoad('./tsconfig.docgen.json').config,

      /**
       * Omits certain props from documentation generation.
       *
       * @param {PropItem} prop - Prop data
       * @param {Component} component - Component data
       * @param {string} component.name - Name of component
       * @return {boolean} `false` if prop should be omitted, `true` otherwise
       */
      propFilter: (prop: PropItem, component: Component): boolean => {
        if (prop.parent && prop.parent.fileName.includes('@types/react')) {
          if (prop.name.startsWith('aria-')) return false
          if (prop.name.startsWith('on')) return false
        }

        return true
      },

      savePropValueAsString: false,
      shouldExtractLiteralValuesFromEnum: true,
      shouldExtractValuesFromUnion: true,
      shouldRemoveUndefinedFromOptional: false,
      skipChildrenPropWithoutDoc: true,
      tsconfigPath: process.env. UNIPACK_TSCONFIG
    }
  },

  /**
   * Alters the native Webpack configuration.
   *
   * @param {Configuration} config - Storybook Webpack configuration
   * @param {Options} options - Storybook builder, CLI, and loader options
   * @return {Configuration} Modified Webpack configuration
   */
  webpackFinal: (config: Configuration, options: Options): Configuration => {
    // Get path to environment file
    const ENVPATH = `./.env.${process.env.NODE_ENV}`

    // ! Replace Dotenv plugin defined by Storybook to fix `TypeError: cannot
    // ! use 'in' operator to search for "TS_JEST_DEBUG" in "MISSING_ENV_VAR"`
    config.plugins.unshift(
      new Dotenv({
        allowEmptyValues: true,
        defaults: `${process.cwd()}/.env.defaults`,
        expand: true,
        // `process.env` is not polyfilled in Webpack 5+, leading to errors in
        // environments where `process` is `null` (browsers)
        /** @see https://github.com/mrsteele/dotenv-webpack#processenv-stubbing--replacing */
        ignoreStub: true,
        path: ENVPATH,
        safe: ENVPATH
      })
    )

    // Override DefinePlugin definitions
    // ! Fixes `Unexpected identifier ':'`
    config.plugins = config.plugins.map(plugin => {
      if (plugin.constructor.name === 'DefinePlugin') {
        plugin['definitions']['process.env'] = `'${JSON.stringify({
          DEBUG: process.env.DEBUG,
          NODE_ENV: process.env.NODE_ENV,
          NODE_OPTIONS: process.env.NODE_OPTIONS,
          npm_package_name: process.env.npm_package_name,
          npm_package_version: process.env.npm_package_version
        })}'`
      }

      return plugin
    })

    // ! Fixes `upath.normalize is not a function`
    /** @see https://github.com/storybookjs/storybook/issues/14856 */
    config.resolve.fallback['path'] = require.resolve('path-browserify')

    // ! Fixes `Module not found: Can't resolve '*'`
    config.resolve.fallback['tty'] = require.resolve('tty-browserify')
    config.resolve.fallback['util'] = require.resolve('util/')

    // Set webpack target
    config.target = 'web'

    return browserConfig(config)
  }
}

export default config