import { h } from 'preact'
import PreactCSSTransitionGroup from 'preact-css-transition-group'

import Loading from './LoadingSpinner'
import Failure from './Failure'
import App from './App'

const AppWrapper = ({
  isAsync,
  isFailure,
  isLoadingImage,
  tries,
  children
}) => {
  let component, mainComponent

  if (isFailure) {
    component = <Failure key="failure-key" tries={tries} />
  }

  const appComponent = (
    <App key="app-key">{!component ? children : component}</App>
  )

  if (isAsync) {
    mainComponent = appComponent
    return mainComponent
  } else {
    if (isLoadingImage) {
      component = <Loading key="loading-key" />
    }
    if (!component) {
      component = appComponent
    }

    const transitionComponent = (
      <PreactCSSTransitionGroup
        transitionName="fade"
        transitionEnterTimeout={1000}
        transitionLeaveTimeout={500}
      >
        {component}
      </PreactCSSTransitionGroup>
    )

    mainComponent = transitionComponent
  }
  return mainComponent
}

export default AppWrapper

@@ -295,24 +295,9 @@
 nent
-, mainComponent
 %0A
+
 %0A  i
@@ -493,41 +493,8 @@
 ) %7B%0A
-    mainComponent = appComponent%0A
     
@@ -492,36 +492,35 @@
 c) %7B%0A    return 
-main
+app
 Component%0A  %7D el
@@ -672,35 +672,14 @@
     
-const transitionComponent =
+return
  (%0A 
@@ -886,75 +886,11 @@
   )%0A
-%0A    mainComponent = transitionComponent%0A  %7D%0A  return mainComponent
+  %7D
 %0A%7D%0A%0A

Remove unnecessary variables