content: import React from 'react';
  import PropTypes from 'prop-types';
  
  import style from 'PVWStyle/ReactCollapsibleControls/FloatImageControl.mcss';
  
  import CollapsibleWidget from '../../Widgets/CollapsibleWidget';
  import InlineToggleButtonWidget from '../../Widgets/InlineToggleButtonWidget';
  import ToggleIconButtonWidget from '../../Widgets/ToggleIconButtonWidget';
  
  export default class TimeFloatImageControl extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        change: false,
      };
  
      // Bind callback
      this.onActiveView = this.onActiveView.bind(this);
      this.attachListener = this.attachListener.bind(this);
      this.removeListener = this.removeListener.bind(this);
      this.addProbe = this.addProbe.bind(this);
      this.removeProbe = this.removeProbe.bind(this);
      this.updateProbe = this.updateProbe.bind(this);
      this.updateActive = this.updateActive.bind(this);
      this.toggleProbe = this.toggleProbe.bind(this);
      this.sortProbes = this.sortProbes.bind(this);
    }
  
    componentWillMount() {
      this.attachListener();
    }
  
    componentWillReceiveProps(nextProps) {
      const previous = this.props.model;
      const next = nextProps.model;
  
      if (previous !== next) {
        // Force redraw
        this.attachListener();
        this.setState({ change: !this.state.change });
      }
    }
  
    componentWillUnmount() {
      this.removeListener();
    }
  
    onActiveView(obj, activeView) {
      this.props.model.setActiveView(activeView);
      this.forceUpdate();
    }
  
    attachListener() {
      this.removeListener();
      this.subscription = this.props.model.probeManager.onChange(() => {
        this.forceUpdate();
      });
    }
  
    removeListener() {
      if (this.subscription) {
        this.subscription.unsubscribe();
        this.subscription = null;
      }
    }
  
    addProbe() {
      this.props.model.probeManager.addProbe();
      this.props.model.render();
      this.forceUpdate();
    }
  
    removeProbe() {
      const activeProbe = this.props.model.probeManager.getActiveProbe();
      if (activeProbe) {
        this.props.model.probeManager.removeProbe(activeProbe.name);
        this.props.model.render();
        this.forceUpdate();
      }
    }
  
    updateProbe(event) {
      const name = event.target.name;
      const value = event.target.value;
      const activeProbe = this.props.model.probeManager.getActiveProbe();
  
      if (name === 'name') {
        activeProbe.updateName(value);
      } else {
        const idx = Number(name);
        const extent = [].concat(activeProbe.getExtent());
        extent[idx] = Number(value);
        activeProbe.updateExtent(...extent);
      }
    }
  
    updateActive(e) {
      const name = e.target.value;
      this.props.model.probeManager.setActiveProbe(name);
    }
  
    toggleProbe(e) {
      let target = e.target;
      while (!target.dataset.name) {
        target = target.parentNode;
      }
      const name = target.dataset.name;
      const enable = !Number(target.dataset.active);
      this.props.model.enableProbe(name, enable);
    }
  
    sortProbes() {
      this.props.model.sortProbesByName();
    }
  
    render() {
      const probeManager = this.props.model.probeManager;
      const { queryDataModel } = this.props.model.getControlModels();
      const timeIdx = queryDataModel.getIndex('time');
      const chartData = this.props.model.chartData;
      const activeView = this.props.model.getActiveView();
      const buttons = [
        <ToggleIconButtonWidget
          key="0"
          toggle={false}
          className={style.addProbeIcon}
          icon=""
          onChange={this.addProbe}
        />,
      ];
      const activeProbe = probeManager.getActiveProbe();
      if (activeProbe) {
        buttons.push(
          <ToggleIconButtonWidget
            key="1"
            toggle={false}
            className={style.removeProbeIcon}
            icon=""
            onChange={this.removeProbe}
          />
        );
      }
      const sortProbes = (
        <ToggleIconButtonWidget
          toggle={false}
          className={style.sortProbeIcon}
          icon=""
          onChange={this.sortProbes}
        />
      );
  
      // Put minus before
      buttons.reverse();
  
      return (
        <div className={style.container}>
          <div style={{ padding: '10px 5px 5px' }}>
            <InlineToggleButtonWidget
              options={[
                { icon: style.imageViewIcon },
                { icon: style.bothViewIcon },
              ]}
              activeColor="#ccc"
              defaultColor="rgba(0,0,0,0)"
              active={activeView}
              onChange={this.onActiveView}
            />
          </div>
          <CollapsibleWidget
            title="Time probes"
            activeSubTitle
            subtitle={buttons}
            visible
          >
            <section className={style.item}>
              <label className={style.smallLabel}>Name</label>
              <input
                className={style.input}
                type="text"
                name="name"
                value={activeProbe ? activeProbe.name : '' || ''}
                onChange={this.updateProbe}
              />
              <select
                className={style.dropDown}
                value={undefined}
                onChange={this.updateActive}
              >
                {probeManager.getProbeNames().map((name, index) => (
                  <option key={index} value={name}>
                    {name}
                  </option>
                ))}
              </select>
            </section>
            <section className={style.item}>
              <label className={style.smallLabel}>X</label>
              <input
                className={style.input}
                type="number"
                name="0"
                value={activeProbe ? activeProbe.extent[0] : 0}
                onChange={this.updateProbe}
              />
              <input
                className={style.input}
                type="number"
                name="1"
                value={activeProbe ? activeProbe.extent[1] : 5}
                onChange={this.updateProbe}
              />
            </section>
            <section className={style.item}>
              <label className={style.smallLabel}>Y</label>
              <input
                className={style.input}
                type="number"
                name="2"
                value={activeProbe ? activeProbe.extent[2] : 0}
                onChange={this.updateProbe}
              />
              <input
                className={style.input}
                type="number"
                name="3"
                value={activeProbe ? activeProbe.extent[3] : 5}
                onChange={this.updateProbe}
              />
            </section>
          </CollapsibleWidget>
          <CollapsibleWidget
            title="Legend"
            visible={activeView > 0}
            activeSubTitle
            subtitle={sortProbes}
          >
            {chartData.fields.map((field, index) => (
              <section
                key={index}
                className={style.item}
                data-name={field.name}
                data-active={field.active ? '1' : '0'}
              >
                <label className={style.label}>
                  <i
                    className={
                      field.active
                        ? style.enableLegendIcon
                        : style.disableLegendIcon
                    }
                    style={{ color: field.color }}
                  />
                  {field.name}
                </label>
                <span className={style.value} title={field.data[timeIdx]}>
                  {field.data[timeIdx]}
                </span>
              </section>
            ))}
          </CollapsibleWidget>
        </div>
      );
    }
  }
  
  TimeFloatImageControl.propTypes = {
    model: PropTypes.object.isRequired,
  };
  