module.exports = (api) => {
  const presetEnv = [
    '@babel/preset-env',
    {
      targets: {
        electron: '4.0'
      }
    }
  ]

  return {
    presets: api.env('development')
      ? [presetEnv, '@babel/typescript', '@babel/preset-react', 'power-assert']
      : [presetEnv, '@babel/typescript', '@babel/preset-react', 'minify']
  }
}

import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import OptimizeCssnanoPlugin from '@intervolga/optimize-cssnano-plugin'

export default (env, argv) => {
  const MAIN = !!(env && env.main)
  const PROD = !!(argv.mode && argv.mode === 'production')
  if (PROD) {
    process.env.NODE_ENV = 'production'
  }

  return {
    target: MAIN ? 'electron-main' : 'electron-renderer',
    entry: MAIN ? './src/main/AppMain.ts' : './src/renderer/AppRenderer.tsx',
    output: {
      path: PROD ? `${__dirname}/dist/src/assets` : `${__dirname}/src/assets`,
      filename: MAIN ? 'main.js' : 'renderer.js'
    },
    devtool: PROD ? '' : 'source-map',
    node: {
      __dirname: false,
      __filename: false
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.ts', '.tsx']
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: [
            { loader: 'babel-loader' },
            {
              loader: 'ifdef-loader',
              options: {
                env: PROD ? 'PRODUCTION' : 'DEBUG'
              }
            }
          ]
        },
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: PROD
                  ? '[hash:base64]'
                  : '[name]-[local]-[hash:base64:5]',
                url: false,
                importLoaders: 1,
                sourceMap: !PROD
              }
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: PROD ? 'compressed' : 'expanded',
                sourceMap: !PROD
              }
            }
          ]
        }
      ]
    },
    plugins: PROD
      ? [
          new MiniCssExtractPlugin({ filename: 'bundle.css' }),
          new OptimizeCssnanoPlugin()
        ]
      : [new MiniCssExtractPlugin({ filename: 'bundle.css' })],
    externals: MAIN ? [] : ['electron']
  }
}

{
   loader: 'ifdef-loader',
   options: {
    env: PROD ? 'PRODUCTION' : 'DEBUG'
  }
}

/// #if env == 'DEBUG'
console.log('DEBUG!!!')
/// #endif

{
  "scripts": {
    "test": "mocha --require @babel/register src/**/*.test.ts"
  }
}

{
  "scripts": {
    "test": "mocha --require espower-typescript/guess src/**/*.test.ts"
  }
}

import {
  finishRegisterRootFolder,
  finishEnumSubFolders,
  finishEnumItems,
  unregisterRootFolder,
  selectItem
} from '../actions/index'
import { ActionType, AppState } from '../Types'
import { checkRegisterRootFolder } from './registerRootFolder'
import { checkUnregisterRootFolder } from './unregisterRootFolder'
import { checkEnumSubFolders } from './enumSubFolders'
import { checkEnumItems } from './enumItems'
import { checkSelectItem } from './selectItem'

type Actions =
  | ReturnType<typeof finishRegisterRootFolder>
  | ReturnType<typeof finishEnumSubFolders>
  | ReturnType<typeof finishEnumItems>
  | ReturnType<typeof unregisterRootFolder>
  | ReturnType<typeof selectItem>

const InitialState: AppState = {
  currentFolder: {
    treeId: 0,
    path: '',
    isRoot: false
  },
  folders: [],
  items: []
}

const reducer = (state = InitialState, action: Actions): AppState => {
  switch (action.type) {
    case ActionType.FinishRegisterRootFolder:
      return checkRegisterRootFolder(state, action)

    case ActionType.RequestUnregisterRootFolder:
      return checkUnregisterRootFolder(state, action)

    case ActionType.FinishEnumSubFolders:
      return checkEnumSubFolders(state, action)

    case ActionType.FinishEnumItems:
      return checkEnumItems(state, action)

    case ActionType.RequestSelectItem:
      return checkSelectItem(state, action)

    default:
      return state
  }
}

import { AppState } from '../Types'
import { selectItem } from '../actions/index'

export const checkSelectItem = (
  state: AppState,
  action: ReturnType<typeof selectItem>
): AppState => {
  return Object.assign({}, state, {
    currentItem: action.payload.item
  })
}

window.addEventListener('load', () => {
  let store = createStore(RootReducer, applyMiddleware(ReduxThunkMiddleware))

  render(
    <Provider store={store}>
      <>
        <Toolbar />
        <div className="content">
          <SplitPane split="vertical" minSize={256} defaultSize={256}>
            <Explorer />
            <FileItemList />
          </SplitPane>
        </div>
      </>
    </Provider>,
    document.querySelector('.app')
  )
})

type Props = {
  folders: Folder[]
  currentFolder: CurrentFolder
  enumSubFolders: (folderPath: string) => void
  enumItems: (folder: Folder) => void
}

Type '{}' is missing the following properties from
type 'Readonly<PropsWithChildren<Pick<Props, "enumSubFolders" | "enumItems">>>':
enumSubFolders, enumItems ts(2739)

type Props = {
  folders: Folder[]
  currentFolder: CurrentFolder
  enumSubFolders?: (folderPath: string) => void
  enumItems?: (folder: Folder) => void
}

const ipcRenderer = window.require('electron').ipcRenderer

declare global {
  interface Window {
    require: any
  }
}

{
  "scripts": {
    "watch:tcm": "tcm -p ./src/renderer/components/**/*.scss -w",
  }  
}

{
  "arrowParens": "always",
  "semi": false,
  "singleQuote": true
}