/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const {
  createFactory,
  createRef,
  PureComponent,
} = require("resource://devtools/client/shared/vendor/react.mjs");
const {
  connect,
} = require("resource://devtools/client/shared/vendor/react-redux.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");

const AnimationList = createFactory(
  require("resource://devtools/client/inspector/animation/components/AnimationList.js")
);
const CurrentTimeScrubber = createFactory(
  require("resource://devtools/client/inspector/animation/components/CurrentTimeScrubber.js")
);
const ProgressInspectionPanel = createFactory(
  require("resource://devtools/client/inspector/animation/components/ProgressInspectionPanel.js")
);

const {
  findOptimalTimeInterval,
} = require("resource://devtools/client/inspector/animation/utils/utils.js");
const {
  getStr,
} = require("resource://devtools/client/inspector/animation/utils/l10n.js");
const { throttle } = require("resource://devtools/shared/throttle.js");

// The minimum spacing between 2 time graduation headers in the timeline (px).
const TIME_GRADUATION_MIN_SPACING = 40;

class AnimationListContainer extends PureComponent {
  static get propTypes() {
    return {
      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
      direction: PropTypes.string.isRequired,
      dispatch: PropTypes.func.isRequired,
      getAnimatedPropertyMap: PropTypes.func.isRequired,
      getNodeFromActor: PropTypes.func.isRequired,
      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
      selectAnimation: PropTypes.func.isRequired,
      setAnimationsCurrentTime: PropTypes.func.isRequired,
      setHighlightedNode: PropTypes.func.isRequired,
      setSelectedNode: PropTypes.func.isRequired,
      sidebarWidth: PropTypes.number.isRequired,
      simulateAnimation: PropTypes.func.isRequired,
      timeScale: PropTypes.object.isRequired,
    };
  }

  constructor(props) {
    super(props);

    this._ref = createRef();

    this.updateDisplayableRange = throttle(
      this.updateDisplayableRange,
      100,
      this
    );

    this.state = {
      // tick labels and lines on the progress inspection panel
      ticks: [],
      // Displayable range.
      displayableRange: { startIndex: 0, endIndex: 0 },
    };
  }

  componentDidMount() {
    this.updateTicks(this.props);

    const current = this._ref.current;
    this._inspectionPanelEl = current.querySelector(
      ".progress-inspection-panel"
    );
    this._inspectionPanelEl.addEventListener("scroll", () => {
      this.updateDisplayableRange();
    });

    this._animationListEl = current.querySelector(".animation-list");
    const resizeObserver = new current.ownerGlobal.ResizeObserver(() => {
      this.updateDisplayableRange();
    });
    resizeObserver.observe(this._animationListEl);

    const animationItemEl = current.querySelector(".animation-item");
    this._itemHeight = animationItemEl.offsetHeight;

    this.updateDisplayableRange();
  }

  componentDidUpdate(prevProps) {
    const { timeScale, sidebarWidth } = this.props;

    if (
      timeScale.getDuration() !== prevProps.timeScale.getDuration() ||
      timeScale.zeroPositionTime !== prevProps.timeScale.zeroPositionTime ||
      sidebarWidth !== prevProps.sidebarWidth
    ) {
      this.updateTicks(this.props);
    }
  }

  /**
   * Since it takes too much time if we render all of animation graphs,
   * we restrict to render the items that are not in displaying area.
   * This function calculates the displayable item range.
   */
  updateDisplayableRange() {
    const count =
      Math.floor(this._animationListEl.offsetHeight / this._itemHeight) + 1;
    const index = Math.floor(
      this._inspectionPanelEl.scrollTop / this._itemHeight
    );
    this.setState({
      displayableRange: { startIndex: index, endIndex: index + count },
    });
  }

  updateTicks(props) {
    const { animations, timeScale } = props;
    const tickLinesEl = this._ref.current.querySelector(".tick-lines");
    const width = tickLinesEl.offsetWidth;
    const animationDuration = timeScale.getDuration();
    const minTimeInterval =
      (TIME_GRADUATION_MIN_SPACING * animationDuration) / width;
    const intervalLength = findOptimalTimeInterval(minTimeInterval);
    const intervalWidth = (intervalLength * width) / animationDuration;
    const tickCount = parseInt(width / intervalWidth, 10);
    const isAllDurationInfinity = animations.every(
      animation => animation.state.duration === Infinity
    );
    const zeroBasePosition =
      width * (timeScale.zeroPositionTime / animationDuration);
    const shiftWidth = zeroBasePosition % intervalWidth;
    const needToShift = zeroBasePosition !== 0 && shiftWidth !== 0;

    const ticks = [];
    // Need to display first graduation since position will be shifted.
    if (needToShift) {
      const label = timeScale.formatTime(timeScale.distanceToRelativeTime(0));
      ticks.push({ position: 0, label, width: shiftWidth });
    }

    for (let i = 0; i <= tickCount; i++) {
      const position = ((i * intervalWidth + shiftWidth) * 100) / width;
      const distance = timeScale.distanceToRelativeTime(position);
      const label =
        isAllDurationInfinity && i === tickCount
          ? getStr("player.infiniteTimeLabel")
          : timeScale.formatTime(distance);
      ticks.push({ position, label, width: intervalWidth });
    }

    this.setState({ ticks });
  }

  render() {
    const {
      addAnimationsCurrentTimeListener,
      animations,
      direction,
      dispatch,
      getAnimatedPropertyMap,
      getNodeFromActor,
      removeAnimationsCurrentTimeListener,
      selectAnimation,
      setAnimationsCurrentTime,
      setHighlightedNode,
      setSelectedNode,
      simulateAnimation,
      timeScale,
    } = this.props;
    const { displayableRange, ticks } = this.state;

    return dom.div(
      {
        className: "animation-list-container",
        ref: this._ref,
      },
      ProgressInspectionPanel({
        indicator: CurrentTimeScrubber({
          addAnimationsCurrentTimeListener,
          direction,
          removeAnimationsCurrentTimeListener,
          setAnimationsCurrentTime,
          timeScale,
        }),
        list: AnimationList({
          animations,
          dispatch,
          displayableRange,
          getAnimatedPropertyMap,
          getNodeFromActor,
          selectAnimation,
          setHighlightedNode,
          setSelectedNode,
          simulateAnimation,
          timeScale,
        }),
        ticks,
      })
    );
  }
}

const mapStateToProps = state => {
  return {
    sidebarWidth: state.animations.sidebarSize
      ? state.animations.sidebarSize.width
      : 0,
  };
};

module.exports = connect(mapStateToProps)(AnimationListContainer);