import styled from '@emotion/styled'
import {containerStyles, define, node, number, useBuilderContext, useComponentData} from '@react-form-builder/core'
import {useCallback, useEffect, useMemo, useState} from 'react'
const SContainer = styled.div`
 display: flex;
 position: relative;
 z-index: 100 !important;
`
const {flexDirection, gap} = containerStyles
const minWidth = 50
const minHeight = 50
const CustomContainer = ({pane, width: _w, height: _h, ...rest}) => {
 const {store} = useComponentData()
 const {builderMode} = useBuilderContext()
 const inDesigner = builderMode === 'builder'
 const width = store.props?.width?.value || _w
 const height = store.props?.height?.value || _h
 const style = useMemo(() => ({
 width: `${width}px`,
 height: `${height}px`
 }), [height, width])
 const [isDragging, setIsDragging] = useState(false)
 const [startPos, setStartPos] = useState({x: 0, y: 0})
 console.log({width, height, builderMode})
 const handleMouseDown = useCallback((e) => {
 setIsDragging(true)
 setStartPos({x: e.clientX, y: e.clientY})
 e.preventDefault()
 }, [])
 const handleMouseUp = useCallback((e) => {
 setIsDragging(false)
 e.preventDefault()
 }, [])
 useEffect(() => {
 const handleMouseMove = (e) => {
 if (!isDragging) return
 const deltaX = e.clientX - startPos.x
 const deltaY = e.clientY - startPos.y
 const newWidth = Math.max(width + deltaX, minWidth)
 const newHeight = Math.max(height + deltaY, minHeight)
 console.log({newWidth, newHeight})
 store.props ??= {}
 store.props.width ??= {}
 store.props.width.value = newWidth
 store.props.height ??= {}
 store.props.height.value = newHeight
 }
 const handleMouseUp = () => setIsDragging(false)
 document.addEventListener('mousemove', handleMouseMove)
 document.addEventListener('mouseup', handleMouseUp)
 return () => {
 document.removeEventListener('mousemove', handleMouseMove)
 document.removeEventListener('mouseup', handleMouseUp)
 }
 }, [store, height, isDragging, startPos, width])
 return <SContainer {...rest} style={style}>
 {pane}
 {inDesigner && <div
 style={{
 position: 'absolute',
 right: 0,
 bottom: 0,
 border: '2px solid green',
 width: '20px',
 height: '20px',
 cursor: 'se-resize',
 backgroundColor: '#ccc',
 zIndex: 1000
 }}
 onMouseDown={handleMouseDown}
 onMouseUp={handleMouseUp}
 />}
 </SContainer>
}
export const customContainer = define(CustomContainer, 'CustomContainer')
 .name('Container2')
 .props({
 width: number.default(400),
 height: number.default(300),
 pane: node
 .calculable(false).hinted('A child component'),
 })
 .css({
 ...containerStyles,
 flexDirection: flexDirection.default('column'),
 gap: gap.default('10px')
 })

import {cssSize, define, string} from '@react-form-builder/core'
///...
export const rsHeader = define(RsHeader, 'RsHeader')
 .name('Header')
 .props({
 content: string.required.default('Header'),
 headerSize
 })
 .css({
 backgroundColor,
 textAlign,
 color,
 
 width: cssSize.setup({default: 'max-content'}).hinted('Width of the component')
 
 })