import Ember from 'ember';
import HasChartParent from '../has-chart-parent';

const {
  Component,
  computed
} = Ember;

export default Component.extend(HasChartParent, {
  tagName: 'g',
  classNames: ['graph-content'],
  attributeBindings: ['transform', 'clip-path'],

  'clip-path': computed('graph.contentClipPathId', function() {
    var clipPathId = this.get('graph.contentClipPathId');
    return  `url('#${clipPathId}')`;
  }),

  transform: computed('x', 'y', function() {
    var x = this.get('x');
    var y = this.get('y');
    return `translate(${x} ${y})`;
  }),

  x: computed.alias('graph.graphX'),
  y: computed.alias('graph.graphY'),

  width: computed.alias('graph.graphWidth'),
  height: computed.alias('graph.graphHeight'),

  init() {
    this._super(...arguments);
    this.set('graph.content', this);
  },
});