text: import React from 'react';
  import PropTypes from 'prop-types';
  import { StyleSheet, css } from 'aphrodite';
  import pluralize from '../../utils/pluralize';
  
  const getTitle = (logItem, initial) => {
    if (initial) {
      return 'Initial';
    }
    if (logItem.patches) {
      return `${logItem.patches.length} ${pluralize(logItem.patches.length, 'patch', 'patches')}`;
    }
    return 'Change';
  };
  
  // const tsToDate = (timestamp) => {
  //   const d = new Date(timestamp);
  //   const hh = `0${d.getHours()}`.slice(0, 2);
  //   const mm = `0${d.getMinutes()}`.slice(0, 2);
  //   const ss = `0${d.getSeconds()}`.slice(0, 2);
  //   return `${hh}:${mm}:${ss}`;
  // };
  
  export default class MstLogItem extends React.PureComponent {
    static propTypes = {
      logItem: PropTypes.object.isRequired,
      active: PropTypes.bool,
      initial: PropTypes.bool,
      selected: PropTypes.bool,
      onSelect: PropTypes.func.isRequired,
      onActivate: PropTypes.func.isRequired,
      onCancel: PropTypes.func.isRequired,
      onCommit: PropTypes.func.isRequired,
      style: PropTypes.object,
    };
  
    handleSelect = () => this.props.onSelect(this.props.logItem.id);
    handleActivate = () => this.props.onActivate(this.props.logItem.id);
    handleCancel = () => this.props.onCancel(this.props.logItem.id);
    handleCommit = () => this.props.onCommit(this.props.logItem.id);
  
    render() {
      const { active, initial, selected, logItem, style } = this.props;
      return (
        <div
          onClick={this.handleSelect}
          className={css(styles.logItem, selected && styles.logItemSelected)}
          style={style}
        >
          <div className={css(styles.title, selected && styles.titleSelected)}>
            {getTitle(logItem, initial)}
          </div>
  
          <div className={css(styles.rightButtons, selected && styles.rightButtonsSelected)}>
            {!initial &&
              <div
                onClick={this.handleCommit}
                className={css(styles.button)}
                title="Commit"
              >
                <CommitIcon />
              </div>
            }
            {!initial &&
              <div
                onClick={this.handleCancel}
                className={css(styles.button)}
                title="Cancel"
              >
                <CancelIcon />
              </div>
            }
            {!active && (
              <div
                onClick={this.handleActivate}
                className={css(styles.button)}
                title="Time-travel here"
              >
                <TravelIcon />
              </div>
            )}
            {active && (
              <div className={css(styles.activeIndicator)} />
            )}
          </div>
          {active && (
            <div className={css(styles.activeIndicator)} />
          )}
        </div>
      );
    }
  }
  
  const TravelIcon = () => (
    <svg
      baseProfile="basic"
      xmlns="http://www.w3.org/2000/svg"
      width="15"
      height="15"
      viewBox="0 0 15 15"
    >
      <path fill="none" stroke="var(--log-item-buttons-color)" strokeWidth="1.2" d="M2.188 4.708a6 6 0 1 1 .115 5.792M7.5 7.5V3m0 4.5L10 10" />
      <g fill="var(--log-item-buttons-color)">
        <path d="M.553 3.626L1.5 7.5l2.882-2.757L.553 3.626z" />
        <circle cx="7.5" cy="7.5" r=".75" />
      </g>
    </svg>
  );
  
  const CancelIcon = () => (
    <svg
      baseProfile="basic"
      xmlns="http://www.w3.org/2000/svg"
      width="15"
      height="15"
      viewBox="0 0 15 15"
    >
      <path fill="none" stroke="var(--log-item-buttons-color)" strokeWidth="1.4" strokeMiterlimit="10" d="M2 13L13 2M13 13L2 2" />
    </svg>
  );
  
  const CommitIcon = () => (
    <svg
      baseProfile="basic"
      xmlns="http://www.w3.org/2000/svg"
      width="15"
      height="15"
      viewBox="0 0 15 15"
    >
      <path fill="none" stroke="var(--log-item-buttons-color)" strokeMiterlimit="10" d="M7.5 3.143v7.838" />
      <g fill="var(--log-item-buttons-color)">
        <circle cx="7.5" cy="3.256" r="2.256" />
        <path d="M4.708 10.164L7.5 15l2.792-4.836z" />
      </g>
    </svg>
  );
  
  
  const styles = StyleSheet.create({
    logItem: {
      display: 'flex',
      alignItems: 'center',
      boxSizing: 'border-box',
      fontSize: 12,
      userSelect: 'none',
      cursor: 'default',
      '--log-item-buttons-pane-opacity': '0',
      '--log-item-buttons-color': '#000',
      '--log-item-primary-color': 'var(--primary-color)',
      '--log-item-date-color': 'inherit',
      ':hover': {
        '--log-item-date-color': 'transparent',
        '--log-item-buttons-pane-opacity': '0.95',
      },
      ':not(:last-child)': {
        borderBottom: '1px solid #eee',
      },
    },
    logItemSelected: {
      backgroundColor: 'var(--primary-color)',
      '--log-item-primary-color': '#fff',
      color: '#fff',
      ':hover': {
        '--log-item-buttons-color': '#fff',
      },
    },
    title: {
      padding: 5,
      flex: '1 1 auto',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      direction: 'rtl',
      unicodeBidi: 'plaintext',
      textOverflow: 'ellipsis',
    },
    titleSelected: {
      filter: 'contrast(0.1) brightness(2)',
    },
  
    rightButtons: {
      opacity: 'var(--log-item-buttons-pane-opacity)',
      display: 'flex',
      position: 'absolute',
      right: 0,
      top: 0,
      bottom: 0,
      backgroundImage: 'linear-gradient(to right, transparent, #fff 10px)',
    },
    rightButtonsSelected: {
      backgroundImage: 'linear-gradient(to right, transparent, var(--primary-color) 10px)',
    },
    button: {
      flex: '0 0 auto',
      width: 35,
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      opacity: 0.7,
      position: 'relative',
      zIndex: 1, // overflow date
      ':hover': {
        opacity: 1,
      },
    },
    activeIndicator: {
      flex: '0 0 auto',
      width: 35,
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      ':after': {
        content: '""',
        width: 8,
        height: 8,
        backgroundColor: 'var(--log-item-primary-color)',
        borderRadius: '50%',
      },
    },
  });
  