// @flow
import React from 'react'
import {RefreshControl} from 'react-native'
import {ScrollView} from 'glamorous-native'
import {Markdown} from '../components/markdown'
import LoadingView from '../components/loading'
import {text} from '../../../docs/faqs.json'
import {tracker} from '../../analytics'
import bugsnag from '../../bugsnag'
import delay from 'delay'

const faqsUrl = 'https://stodevx.github.io/AAO-React-Native/faqs.json'

export class FaqView extends React.PureComponent {
  static navigationOptions = {
    title: 'FAQs',
  }

  state = {
    text: text,
    refreshing: false,
  }

  componentWillMount() {
    this.fetchData()
  }

  fetchData = async () => {
    let fetched = text
    try {
      let blob: {text: string} = await fetchJson(faqsUrl)
      fetched = blob.text
    } catch (err) {
      tracker.trackException(err.message)
      bugsnag.notify(err)
      console.warn(err.message)
    }

    if (process.env.NODE_ENV === 'development') {
      fetched = text
    }

    this.setState({text: fetched})
  }

  refresh = async () => {
    const start = Date.now()
    this.setState(() => ({refreshing: true}))

    await this.fetchData()

    // wait 0.5 seconds – if we let it go at normal speed, it feels broken.
    const elapsed = Date.now() - start
    if (elapsed < 500) {
      await delay(500 - elapsed)
    }
    this.setState(() => ({refreshing: false}))
  }

  render() {
    if (!this.state.text) {
      return <LoadingView />
    }

    const refreshControl = (
      <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this.refresh}
      />
    )

    return (
      <ScrollView refreshControl={refreshControl} paddingHorizontal={15}>
        <Markdown source={text} />
      </ScrollView>
    )
  }
}

@@ -164,16 +164,86 @@
 rkdown'%0A
+import %7BreportNetworkProblem%7D from '../../lib/report-network-problem'%0A
 import L
@@ -289,22 +289,32 @@
 %0Aimport 
-%7Btext%7D
+* as defaultData
  from '.
@@ -341,84 +341,8 @@
 on'%0A
-import %7Btracker%7D from '../../analytics'%0Aimport bugsnag from '../../bugsnag'%0A
 impo
@@ -564,20 +564,51 @@
   text: 
-text
+defaultData.text,%0A    loading: true
 ,%0A    re
@@ -678,85 +678,116 @@
 ta()
-%0A  %7D%0A%0A  fetchData = async () =%3E %7B%0A    let fetched = text%0A    try
+.then(() =%3E %7B%0A      this.setState(() =%3E (%7Bloading: false%7D))%0A    %7D)%0A  %7D%0A%0A  fetchData = async () =%3E
  %7B%0A
-  
     let 
 blob
@@ -786,27 +786,13 @@
 let 
-blob: %7Btext: string
+%7Btext
 %7D = 
@@ -819,52 +819,21 @@
 Url)
-%0A      fetched = blob.text%0A    %7D 
+.
 catch
- 
 (err
-)
+ =%3E
  %7B%0A 
@@ -841,107 +841,100 @@
     
-tracker.trackException(err.message)%0A      bugsnag.notify(err)%0A      console.warn(err.message)
+reportNetworkProblem(err)%0A      return %7Btext: 'There was a problem loading the FAQs'%7D
 %0A    %7D
+)
 %0A%0A  
@@ -991,18 +991,27 @@
     
-fetched = 
+text = defaultData.
 text
@@ -1040,23 +1040,22 @@
 ate(
-%7Btext: fetched%7D
+() =%3E (%7Btext%7D)
 )%0A  
@@ -1443,9 +1443,8 @@
 if (
-!
 this
@@ -1450,20 +1450,23 @@
 s.state.
-text
+loading
 ) %7B%0A    
@@ -1753,16 +1753,27 @@
 source=%7B
+this.state.
 text%7D /%3E

make FAQs report a problem if they fail to load