/* @flow */
import React, { PureComponent } from 'react';
import { StyleSheet, View } from 'react-native';
import format from 'date-fns/format';
import type { TimingItemType } from '../types';

import { RawLabel } from '../common';
import { numberWithSeparators } from '../utils/misc';

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderColor: 'rgba(127, 127, 127, 0.25)',
  },
  label: {
    fontWeight: 'bold',
  },
  value: {
    opacity: 0.9,
  },
});

export default class TimeItem extends PureComponent<TimingItemType> {
  props: TimingItemType;

  render() {
    const { text, startMs, endMs } = this.props;
    const startStr = format(startMs, 'HH:mm:ss.S'); // eslint-disable-line
    const durationStrMs = numberWithSeparators((endMs - startMs).toFixed(2));
    const timingStr = `Start: ${startStr}   Duration: ${durationStrMs} ms`;

    return (
      <View style={styles.item}>
        <RawLabel style={styles.label} text={text} />
        <RawLabel style={styles.value} text={timingStr} />
      </View>
    );
  }
}

/* @flow */
import React, { PureComponent } from 'react';
import { StyleSheet, View } from 'react-native';
import format from 'date-fns/format';
import type { TimingItemType } from '../types';

import { RawLabel } from '../common';
import { numberWithSeparators } from '../utils/misc';

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderColor: 'rgba(127, 127, 127, 0.25)',
  },
  label: {
    fontWeight: 'bold',
  },
  value: {
    opacity: 0.9,
  },
});

export default class TimeItem extends PureComponent<TimingItemType> {
  props: TimingItemType;

  render() {
    const { text, startMs, endMs } = this.props;
    const startStr = format(startMs, 'HH:mm:ss.S'); // eslint-disable-line
    const durationStrMs = numberWithSeparators(endMs - startMs);
    const timingStr = `Start: ${startStr}   Duration: ${durationStrMs} ms`;

    return (
      <View style={styles.item}>
        <RawLabel style={styles.label} text={text} />
        <RawLabel style={styles.value} text={timingStr} />
      </View>
    );
  }
}

Remove fractional ms in diagnostics screen.
timing: Remove fractional ms in diagnostics screen.

endMs and startMs are created by Date.now(), which has a precision
of ±1 ms. Don't suggest a precision that we don't have. Remove all
fractional digits.
