import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

import { t } from '../../locales';
import EditableTitle from '../../components/EditableTitle';
import TooltipWrapper from '../../components/TooltipWrapper';

const propTypes = {
  slice: PropTypes.object.isRequired,
  exploreChartUrl: PropTypes.string,
  exportCSVUrl: PropTypes.string,
  isExpanded: PropTypes.bool,
  formDataExtra: PropTypes.object,
  removeSlice: PropTypes.func,
  updateSliceName: PropTypes.func,
  toggleExpandSlice: PropTypes.func,
  forceRefresh: PropTypes.func,
};

const defaultProps = {
  forceRefresh: () => ({}),
  removeSlice: () => ({}),
  updateSliceName: () => ({}),
  toggleExpandSlice: () => ({}),
};

class SliceHeader extends React.PureComponent {
  constructor(props) {
    super(props);

    this.onSaveTitle = this.onSaveTitle.bind(this);
  }

  onSaveTitle(newTitle) {
    if (this.props.updateSliceName) {
      this.props.updateSliceName(this.props.slice.slice_id, newTitle);
    }
  }

  render() {
    const slice = this.props.slice;
    const isCached = slice.is_cached;
    const isExpanded = !!this.props.isExpanded;
    const cachedWhen = moment.utc(slice.cached_dttm).fromNow();
    const refreshTooltip = isCached ?
      t('Served from data cached %s . Click to force refresh.', cachedWhen) :
      t('Force refresh data');

    return (
      <div className="row chart-header">
        <div className="col-md-12">
          <div className="header">
            <EditableTitle
              title={slice.slice_name}
              canEdit={!!this.props.updateSliceName}
              onSaveTitle={this.onSaveTitle}
              noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
            />
          </div>
          <div className="chart-controls">
            <div id={'controls_' + slice.slice_id} className="pull-right">
              <a>
                <TooltipWrapper
                  placement="top"
                  label="move"
                  tooltip={t('Move chart')}
                >
                  <i className="fa fa-arrows drag" />
                </TooltipWrapper>
              </a>
              <a
                className={`refresh ${isCached ? 'danger' : ''}`}
                onClick={() => (this.props.forceRefresh(slice.slice_id))}
              >
                <TooltipWrapper
                  placement="top"
                  label="refresh"
                  tooltip={refreshTooltip}
                >
                  <i className="fa fa-repeat" />
                </TooltipWrapper>
              </a>
              {slice.description &&
              <a onClick={() => this.props.toggleExpandSlice(slice, !isExpanded)}>
                <TooltipWrapper
                  placement="top"
                  label="description"
                  tooltip={t('Toggle chart description')}
                >
                  <i className="fa fa-info-circle slice_info" />
                </TooltipWrapper>
              </a>
              }
              <a href={slice.edit_url} target="_blank">
                <TooltipWrapper
                  placement="top"
                  label="edit"
                  tooltip={t('Edit chart')}
                >
                  <i className="fa fa-pencil" />
                </TooltipWrapper>
              </a>
              <a className="exportCSV" href={this.props.exportCSVUrl}>
                <TooltipWrapper
                  placement="top"
                  label="exportCSV"
                  tooltip={t('Export CSV')}
                >
                  <i className="fa fa-table" />
                </TooltipWrapper>
              </a>
              <a className="exploreChart" href={this.props.exploreChartUrl} target="_blank">
                <TooltipWrapper
                  placement="top"
                  label="exploreChart"
                  tooltip={t('Explore chart')}
                >
                  <i className="fa fa-share" />
                </TooltipWrapper>
              </a>
              <a className="remove-chart" onClick={() => (this.props.removeSlice(slice))}>
                <TooltipWrapper
                  placement="top"
                  label="close"
                  tooltip={t('Remove chart from dashboard')}
                >
                  <i className="fa fa-close" />
                </TooltipWrapper>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

SliceHeader.propTypes = propTypes;
SliceHeader.defaultProps = defaultProps;

export default SliceHeader;