<script>
import Align from '../index';
import BaseMixin from '../../_util/BaseMixin';

export default {
  mixins: [BaseMixin],
  data () {
    return {
      monitor: true,
      align: {
        points: ['tl', 'tc'],
      },
    };
  },
  methods: {
    getTarget () {
      const ref = this.$refs.container;
      if (!ref) {
      // parent ref not attached
        return document.getElementById('container');
      }
      return ref;
    },

    toggleMonitor () {
      this.setState({
        monitor: !this.$data.monitor,
      });
    },

    forceAlign () {
      this.$refs.align.forceAlign();
    },
  },

  render () {
    return (
      <div
        style={{
          margin: '50px',
        }}
      >
        <p>
          <button onClick={this.forceAlign}>Force align</button>
          &nbsp;&nbsp;&nbsp;
          <label>
            <input type='checkbox' checked={this.monitor} onInput={this.toggleMonitor} />
            &nbsp;
            Monitor window resize
          </label>
        </p>
        <div
          ref='container'
          id='container'
          style={{
            width: '80%',
            height: '500px',
            border: '1px solid red',
          }}
        >
          <Align
            ref='align'
            target={this.getTarget}
            monitorWindowResize={this.$data.monitor}
            align={this.$data.align}
          >
            <div
              style={{
                position: 'absolute',
                width: '50px',
                height: '50px',
                background: 'yellow',
              }}
            >
              source
            </div>
          </Align>
        </div>
      </div>
    );
  },
};

</script>