import React, { Component } from 'react'
import { Link } from 'react-router-dom'

import { history } from 'app/store'

export default class PageHandle extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    this.measure()
  }
  componentDidUpdate(prevProps){
    if (this.props.page.title !== prevProps.page.title) {
      this.measure()
    }
  }
  measure() {
    const { offsetWidth: width, offsetHeight: height } = this.ref.current
    const { id } = this.props.page
    // console.log(id, width, height)
    this.props.onMeasure({ id, width, height })
  }
  render() {
    const { graph, page, bounds, box, onMouseDown, onMouseEnter, onMouseLeave } = this.props
    let style;
    if (box) {
      style = {
        top: (bounds.height) * box.y,
        left: (bounds.width) * box.x,
      }
    } else {
      style = {
        top: (bounds.height) * Math.min(page.settings.y, 0.95),
        left: (bounds.width) * Math.min(page.settings.x, 0.95),
      }
    }
    const className = (graph.home_page_id === page.id)
      ? 'handle homepage'
      : 'handle'
    const url = '/' + graph.path + '/' + page.path
    // console.log(style)
    return (
      <div
        className={className}
        ref={this.ref}
        onMouseDown={onMouseDown}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        onDoubleClick={() => history.push(url)}
        style={style}
      >
        {page.path}
        <Link to={url}>{'>'}</Link>
      </div>
    )
  }
}