import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Platform,
  ScrollView,
  Image,
} from 'react-native';

import Assert from './assert.js'

export default class Reporter extends Component {

  props : {
    context : TestContext
  };

  render() {
    return (
      <ScrollView key="rn-test-scroller" style={styles.container}>
        {this.renderTests()}
      </ScrollView>)
  }

  renderTests() {
    return this.props.context.tests.map((t, i) => {

      let pass = true
      let foundAssertions = false

      if(Array.isArray(t.result)) {
        t.result = t.result.map((r) => {
          if(r.type.name === 'Assert') {
            foundAssertions = true
            let comp = r.props.comparer ? r.props.comparer(r.props.expect, r.props.actual) : (r.props.actual === r.props.expect)
            pass = pass && comp
          }
          return React.cloneElement(r, {desc : r.key})
        })
      }

      t.status = foundAssertions ? (pass ? 'pass' : 'fail') : 'pass'

      return (<View key={'rn-test-' + t.desc} style={{
        borderBottomWidth : 1.5,
        borderColor : '#DDD',
      }}>
        <View key={t.desc} style={{
          alignItems : 'center',
          flexDirection : 'row'
        }}>
          <Text style={[styles.badge, {flex : 1, borderWidth : 0, textAlign : 'left'}]}>{t.desc}</Text>
          <Text style={[styles.badge, this.getBadge(t.status)]}>{t.status ? 'pass' : 'fail'}</Text>
        </View>
        <View key={t.desc + '-result'} style={{backgroundColor : '#F4F4F4'}}>
          {t.result}
        </View>
      </View>)
    })
  }

  getBadge(status: 'running' | 'pass' | 'fail') {
    if(status === 'running')
      return styles.badgeWaiting
    else if(status === 'pass')
      return styles.badgePass
    else
      return styles.badgeFail
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop : 40,
  },
  badge : {
    margin : 16,
    padding : 4,
    borderRadius : 4,
    borderWidth : 2,
    textAlign : 'center'
  },
  badgePass: {
    borderColor : '#00a825',
    color : '#00a825'
  },
  badgeWaiting: {
    borderColor : '#e3c423',
    color : '#e3c423'
  },
  badgeFail: {
    borderColor : '#ff0d0d',
    color : '#ff0d0d'
  }
});