import React, { useState, useEffect, useRef } from 'react'

export default function ResizableDiv ({ children, id, element = {}, disable = false, direction = 'col', min = 20, grow = false, onChange = () => {}, onResize = () => {}, className = '', style = {} }) {
  const [isMounted, setIsMounted] = useState(false)
  const [modelo, setModelo] = useState({ ...element })
  // const [eventUpdate, setEventUpdate] = useState(0)
  const [initialPosX, setInitialPosX] = useState(null)
  const [initialSizeX, setInitialSizeX] = useState(null)
  const [initialPosY, setInitialPosY] = useState(null)
  const [initialSizeY, setInitialSizeY] = useState(null)

  const divRef = useRef(null)

  const initialX = (e) => {
    if (divRef != null && divRef.current != null) {
      const resizable = divRef.current // document.getElementById('Resizable');
      setInitialPosX(e.clientX)
      setInitialSizeX(resizable.offsetWidth)
    }
  }

  const resizeX = (e) => {
    // if (divRef != null && divRef.current != null) {
    //   let resizable = divRef.current // document.getElementById('Resizable');
    //   resizable.style.width = `${parseInt(initialSizeX) + parseInt(e.clientX - initialPosX)}px`
    // }
    const newWidth = parseInt(initialSizeX) + parseInt(e.clientX - initialPosX)
    onChange('width', newWidth, modelo)
  }

  const initialY = (e) => {
    if (divRef != null && divRef.current != null) {
      const resizable = divRef.current // document.getElementById('Resizable');
      setInitialPosY(e.clientY)
      setInitialSizeY(resizable.offsetHeight)
    }
  }

  const resizeY = (e) => {
    // if (divRef != null && divRef.current != null) {
    //   let resizable = divRef.current // document.getElementById('Resizable');
    //   resizable.style.height = `${parseInt(initialSizeY) + parseInt(e.clientY - initialPosY)}px`
    // }
    const newHeight = parseInt(initialSizeY) + parseInt(e.clientY - initialPosY)
    onChange('height', newHeight, modelo)
  }

  const applyResize = () => {
    // console.log(' applyResize ')
    if (divRef != null && divRef.current != null) {
      const resizable = divRef.current // document.getElementById('Resizable');
      if (!grow || grow === false) {
        if (direction === 'col') {
          resizable.style.height = `${modelo.height}px`
          resizable.style.width = '100%'
        }
        if (direction === 'row') {
          resizable.style.height = '100%'
          resizable.style.width = `${modelo.width}px`
        }
      } else {
        if (direction === 'col') {
          resizable.style.height = '5rem'
          resizable.style.width = '100%'
        }
        if (direction === 'row') {
          resizable.style.height = '100%'
          resizable.style.width = '5rem'
        }
      }
    }
    setTimeout(() => {
      onResize()
    }, 100)
  }

  useEffect(() => {
    if (isMounted) {
      applyResize()
    }
  }, [modelo, isMounted])

  useEffect(() => {
    if (isMounted) {
      if (JSON.stringify({ ...element, _dz_background_image: null }) !== JSON.stringify({ ...modelo, _dz_background_image: null })) {
        setModelo({ ...element })
      }
    }
  }, [element])

  useEffect(() => {
    setIsMounted(true)
  }, [])

  return (
    <div
      ref={divRef}
      id={id}
      className={` relative flex items-center justify-center ${direction === 'col' ? 'w-full' : (grow ? ' w-4 ' : '')} ${direction === 'row' ? 'h-full' : (grow ? ' h-4 ' : '')} ${className}`}
      style={grow ? { flexGrow: 1, ...style } : { ...style }}>
      {children}
      { disable !== true && direction === 'col' &&
        <div
          className=' drag-resize-div-x bg-sky-300 '
          draggable='true'
          onDragStart={initialY}
          onDragEnd={resizeY} />
      }
      { disable !== true && direction === 'row' &&
        <div
          className=' drag-resize-div-y bg-sky-300 '
          draggable='true'
          onDragStart={initialX}
          onDragEnd={resizeX} />
      }
    </div>
  )
}