/*
 * == BSD2 LICENSE ==
 * Copyright (c) 2016, Tidepool Project
 *
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the associated License, which is identical to the BSD 2-Clause
 * License as published by the Open Source Initiative at opensource.org.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the License for more details.
 *
 * You should have received a copy of the License along with this program; if
 * not, you can obtain one from Tidepool Project at tidepool.org.
 * == BSD2 LICENSE ==
 */

import React, { PropTypes } from 'react';
import _ from 'lodash';
import Tooltip from '../common/Tooltip';

import { MGDL_UNITS, MMOLL_UNITS } from '../../../utils/constants';
import { displayBgValue } from '../../../utils/format';
import { formatDisplayDate, millisecondsAsTimeOfDay } from '../../../utils/datetime';

import styles from './FocusedSMBGPointLabel.css';

const FocusedSMBGPointLabel = (props) => {
  const { focusedPoint } = props;
  if (!focusedPoint) {
    return null;
  }

  const {
    bgUnits,
    focusedPoint: { data, position, dayPoints, positions },
    timePrefs,
    lines,
  } = props;

  let parsedTime;
  if (timePrefs.timezoneAware) {
    if (data.time) {
      parsedTime = Date.parse(data.time);
    }
  } else {
    if (data.deviceTime) {
      parsedTime = Date.parse(data.deviceTime);
    }
  }
  const smbgTime = formatDisplayDate(parsedTime, timePrefs, 'dddd MMM D');
  const shortDate = formatDisplayDate(parsedTime, timePrefs, 'MMM D');
  const pointTooltips = _.map(dayPoints, (smbg, i) => (
    <Tooltip
      key={i}
      content={<span className={styles.number}>{displayBgValue(smbg.value, bgUnits)}</span>}
      position={positions[i]}
      side={'bottom'}
      tail={false}
      offset={{ top: 15, left: 0 }}
    />
  ));
  let focusedTooltip;
  if (lines) {
    focusedTooltip = (<Tooltip
      title={<span className={styles.explainerText}>{smbgTime}</span>}
      position={position}
      side={'right'}
      offset={{ top: 10, left: 30 }}
    />);
  } else {
    focusedTooltip = (<Tooltip
      title={<span className={styles.tipWrapper}>
        <span className={styles.shortDate}>{shortDate}</span>
        <span className={styles.shortTime}>{millisecondsAsTimeOfDay(data.msPer24)}</span>
      </span>
      }
      content={<span className={styles.tipWrapper}>
        <span className={styles.detailNumber}>{displayBgValue(data.value, bgUnits)}</span>
        <span className={styles.subType}>{data.subType}</span>
      </span>
      }
      position={position}
      side={'right'}
      offset={{ top: 0, left: 5 }}
    />);
  }
  return (
    <div className={styles.container}>
      {pointTooltips}
      {focusedTooltip}
    </div>
  );
};

FocusedSMBGPointLabel.defaultProps = {};

FocusedSMBGPointLabel.propTypes = {
  bgUnits: PropTypes.oneOf([MGDL_UNITS, MMOLL_UNITS]).isRequired,
  focusedPoint: PropTypes.shape({
    data: PropTypes.shape({
      deviceTime: PropTypes.string,
      msPer24: PropTypes.number.isRequired,
      subType: PropTypes.string.isRequired,
      time: PropTypes.string,
      value: PropTypes.number.isRequired,
    }).isRequired,
    dayPoints: PropTypes.arrayOf(PropTypes.shape({
      value: PropTypes.number.isRequired,
    })).isRequired,
    position: PropTypes.shape({
      left: PropTypes.number.isRequired,
      top: PropTypes.number.isRequired,
    }).isRequired,
    positions: PropTypes.arrayOf(PropTypes.shape({
      left: PropTypes.number.isRequired,
      top: PropTypes.number.isRequired,
    })).isRequired,
  }),
  grouped: React.PropTypes.bool.isRequired,
  lines: React.PropTypes.bool.isRequired,
  timePrefs: PropTypes.shape({
    timezoneAware: React.PropTypes.bool.isRequired,
    timezoneName: React.PropTypes.oneOfType([React.PropTypes.string, null]),
  }).isRequired,
};

export default FocusedSMBGPointLabel;

@@ -1064,16 +1064,177 @@
 .css';%0A%0A
+// tooltip offsets%0Aconst SIMPLE_VALUE_TOP_OFFSET = 15;%0Aconst SIMPLE_DAY_TOP_OFFSET = 10;%0Aconst SIMPLE_DAY_LEFT_OFFSET = 30;%0Aconst DETAILED_DAY_LEFT_OFFSET = 5;%0A%0A
 const Fo
@@ -2100,18 +2100,39 @@
 %7B%7B top: 
-15
+SIMPLE_VALUE_TOP_OFFSET
 , left: 
@@ -2360,20 +2360,59 @@
 op: 
-10, left: 30
+SIMPLE_DAY_TOP_OFFSET, left: SIMPLE_DAY_LEFT_OFFSET
  %7D%7D%0A
@@ -2991,17 +2991,40 @@
 , left: 
-5
+DETAILED_DAY_LEFT_OFFSET
  %7D%7D%0A    

move offsets to constants