module.exports =  {
    root: true,
    parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
    extends:  [
      'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
      'plugin:@typescript-eslint/eslint-recommended',
      'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
      'eslint:recommended',
      "plugin:import/typescript",
      'prettier',
      'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
    ],
    plugins: ['@typescript-eslint', 'react', 'react-hooks'],
    parserOptions:  {
      project: './tsconfig.json',
    },
    settings:  {
      react:  {
        version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
      },
      // Without these settings for the import rule, the plugin wasn't correctly
      // finding typescript declaration files. Related:
      // https://github.com/benmosher/eslint-plugin-import/issues/1285
      'import/extensions': ['js', 'jsx', 'ts', 'tsx'],
      'import/parsers': {
        '@typescript-eslint/parser': ['ts', 'tsx'],
      },
      'import/resolver': {
        node: {
          extensions: ['js', 'jsx', 'ts', 'tsx']
        },
      },
    },
    env: {
      browser: true,
      jest: true
    },
    overrides: [
      {
        files: ['webpack.prod.js'],
        env:{
          es6: true,
          node: true
        },
        rules: {
          '@typescript-eslint/no-var-requires': 'off',
        }
      }
    ],
    rules:  {
      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
      // Allow common one-letter identifiers
      // 'id-length': [
      //   'error',
      //   {
      //     exceptions: ['_', 'i', 'x', 'y', 't'],
      //   },
      // ],
      // limits the amount of the amount of params in a function
      'max-params': ['warn', 7],
      // disable mangling of commented-out code
      'capitalized-comments': 'off',
      // disable grouping declaration of constants
      // https://eslint.org/docs/rules/one-var
      'one-var': ['error', 'never'],
      // https://eslint.org/docs/rules/require-await
      'require-await': 'off',
      // use modern template literals
      // https://eslint.org/docs/rules/prefer-template
      // 'prefer-template': 'error',
      // defer sorting to import/sort
      'sort-imports': 'off',
      //react
          // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
      // Types can be infered, this rule blocks that. Example:
      //
      // ```What they want
      // interface Props { A: string }
      //
      // const Component = ({ A }: Props) => {};
      // ```
      //
      // ```What we want
      // interface Props { A: string }
      //
      // const Component: React.FC<Props> = ({ A }) => {};
      // ```
      'react/prop-types': 'off',
      // allow the usage of setState
      // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-set-state.md
      'react/no-set-state': 'off',
      // disable because this doesn't recognize React.memo. It only looks for shouldComponentUpdate
      'react/require-optimization': 'off',
      // disable prop sorting
      'react/jsx-sort-props': 'off',
      // jsx components should have the correct file extensions
      // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
      'react/jsx-filename-extension': [
        'error',
        {
          extensions: ['.jsx', '.tsx'],
        },
      ],
      // allow multiple react components in a file
      'react/no-multi-comp': 'off',
      // ensures consistent function definitions
      'react/function-component-definition': [
        'error',
        {
          namedComponents: 'arrow-function',
          unnamedComponents: 'arrow-function',
        },
      ],
      'no-restricted-imports': [
        'error',
        {
          patterns: [
            'linaria/lib',
            'linaria/lib/*',
          ]
        },
      ],  
      "prettier/prettier": "error"
      // react-hooks
      // 'react-hooks/rules-of-hooks': 'error',
      // 'react-hooks/exhaustive-deps': 'error',
    },
  };