import React from "react"
import { NotImplementedError } from "../../utils/errors"

import Tools from "../constants/tools"
import Layouts from "../constants/layouts"
import Cursor from "../constants/cursor"
import { toSnakeCase } from "../utils/utils"
import EditableDiv from "../../components/editableDiv"



/**
 * Base class to be extended
 */
class Widget extends React.Component{

    static widgetType = "widget"

    constructor(props){
        super(props)

        const {id, widgetName, canvasRef} = props
        // console.log("Id: ", id)
        // this id has to be unique inside the canvas, it will be set automatically and should never be changed
        this.__id = id
        this.canvas = canvasRef?.current || null // canvasContainerRef, because some events work properly only if attached to the container

        // this._selected = false
        this._disableResize = false
        this._disableSelection = false

        this._parent = "" // id of the parent widget, default empty string
        this._children = [] // id's of all the child widgets

        this.minSize = {width: 50, height: 50} // disable resizing below this number
        this.maxSize = {width: 500, height: 500} // disable resizing above this number

        this.cursor = Cursor.POINTER

        this.icon = "" // antd icon name representing this widget
        
        this.elementRef = React.createRef()

        this.attrs = {
            styling: {
                backgroundColor: {
                    tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                    value: ""
                },
                foregroundColor: {
                    tool: Tools.COLOR_PICKER,
                    value: ""
                },
            },
            layout: "show", // enables layout use "hide" to hide layout dropdown, takes the layout from this.layout
            events: {
                event1: {
                    tool: Tools.EVENT_HANDLER,
                    value: ""
                }
            }
        }

        this.functions = {
            "load": {"args1": "number", "args2": "string"}
        }


        this.layout = Layouts.PACK
        this.boundingRect = {
            x: 0,
            y: 0,
            height: 100,
            width: 100
        } 

        this.state = {
            zIndex: 0,
            selected: false,
            widgetName: widgetName  || 'widget', // this will later be converted to variable name
            enableRename: false, // will open the widgets editable div for renaming
            resizing: false,
            resizeCorner: "",

            pos: {x: 0, y: 0}, // used for outer styling
            size: {width: 100, height: 100}, // used for outer styling
            position: "absolute",

            widgetStyling: {
                // use for widget's inner styling
            },

            attrs: { 
                styling: {
                    backgroundColor: {
                        label: "Background Color",
                        tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                        value: "",
                        onChange: (value) => this.setWidgetStyling("backgroundColor", value) 
                    },
                    foregroundColor: {
                        label: "Foreground Color",
                        tool: Tools.COLOR_PICKER,
                        value: "",
                    },
                },
                layout: {
                    label: "Layout",
                    tool: Tools.SELECT_DROPDOWN, // the tool to display, can be either HTML ELement or a constant string
                    value: "flex",
                    options: [
                        {value: "flex", label: "Flex"},
                        {value: "grid", label: "Grid"},
                        {value: "place", label: "Place"},
                    ],
                    onChange: (value) => this.setWidgetStyling("backgroundColor", value) 
                }, 
                size: {
                    width: {
                        label: "Width",
                        tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
                        value: 100,
                        // onChange: (value) => this.setS("backgroundColor", value) 
                    },
                    height: {
                        label: "Height",
                        tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
                        value: 100,
                        // onChange: (value) => this.setS("backgroundColor", value) 
                    },
                },
                events: {
                    event1: {
                        tool: Tools.EVENT_HANDLER,
                        value: ""
                    }
                }
            },
        }

        this.mousePress = this.mousePress.bind(this)
        this.getElement = this.getElement.bind(this)
        this.getBoundingRect = this.getBoundingRect.bind(this)

        this.getWidgetName = this.getWidgetName.bind(this)
        this.getWidgetType = this.getWidgetType.bind(this)
        // this.openRenaming = this.openRenaming.bind(this)

        this.isSelected = this.isSelected.bind(this)
        this.setWidgetName = this.setWidgetName.bind(this)
        this.setAttrValue = this.setAttrValue.bind(this)

        this.getPos = this.getPos.bind(this)
        this.setPos = this.setPos.bind(this)

        this.setWidgetStyling = this.setWidgetStyling.bind(this)

        this.startResizing = this.startResizing.bind(this)
        this.handleResize = this.handleResize.bind(this)
        this.stopResizing = this.stopResizing.bind(this)

    }   

    componentDidMount(){
        this.elementRef.current?.addEventListener("click", this.mousePress)

        this.canvas.addEventListener("mousemove", this.handleResize)
        this.canvas.addEventListener("mouseup", this.stopResizing)
    }

    componentWillUnmount(){
        this.elementRef.current?.removeEventListener("click", this.mousePress)

        this.canvas.addEventListener("mousemove", this.handleResize)
        this.canvas.addEventListener("mouseup", this.stopResizing)
    }

    // TODO: add context menu items such as delete, add etc
    contextMenu(){
        
    }

    getVariableName(){
        return toSnakeCase(this.state.widgetName)
    }

    getWidgetName(){
        return this.state.widgetName
    }

    getWidgetType(){
        return this.constructor.widgetType
    }

    getAttributes(){
        return this.state.attrs
    }

    /**
     * removes the element/widget
     */
    remove(){
        this.elementRef.current.remove()
    }

    mousePress(event){
        // event.preventDefault()
        if (!this._disableSelection){

            // const widgetSelected = new CustomEvent("selection:created", {
            //     detail: {
            //         event,
            //         id: this.__id,
            //         element: this
            //     },
            //     // bubbles: true // Allow the event to bubble up the DOM tree
            // })
            // this.canvas.dispatchEvent(widgetSelected)
        }
    }

    select(){
        this.setState({
            selected: true
        })
        
    }

    deSelect(){
        this.setState({
            selected: false
        })
    }

    isSelected(){
        return this.state.selected
    }

    setPos(x, y){

        if (this.state.resizing){
            // don't change position when resizing the widget
            return
        }
        this.setState({
            pos: {x, y}
        })

        // this.setState((prev) => ({
        //     // pos: {x: x, y: y}
        //     widgetStyling: {
        //         ...prev.widgetStyling,
        //         left: x,
        //         top: y,
        //     }
        // }))

    }

    setParent(parentId){
        this._parent = parentId
    }

    addChild(childId){
        this._children.push(childId)
    }

    removeChild(childId){
        this._children = this._children.filter(function(item) {
                                        return item !== childId
                                    })
    }

    getPos(){
        return this.state.pos
    }

    getProps(){
        return this.attrs
    }

    getBoundingRect(){
        return this.elementRef.current?.getBoundingClientRect()
    }

    getSize(){
        // const boundingRect = this.getBoundingRect()

        return {width: this.state.size.width, height: this.state.size.height}
    }

    getScaleAwareDimensions() {
        // Get the bounding rectangle
        const rect = this.elementRef.current.getBoundingClientRect()
      
        // Get the computed style of the element
        const style = window.getComputedStyle(this.elementRef.current)
      
        // Get the transform matrix
        const transform = style.transform
      
        // Extract scale factors from the matrix
        let scaleX = 1
        let scaleY = 1
      
        if (transform && transform !== 'none') {
          // For 2D transforms (a, c, b, d)
          const matrix = transform.match(/^matrix\(([^,]+),[^,]+,([^,]+),[^,]+,[^,]+,[^,]+\)$/);
      
          if (matrix) {
            scaleX = parseFloat(matrix[1])
            scaleY = parseFloat(matrix[2])
          }
        }
      
        // Return scaled width and height
        return {
          width: rect.width / scaleX,
          height: rect.height / scaleY
        }
      }
      

    getWidgetFunctions(){
        return this.functions
    }

    getId(){
        return this.__id
    }

    getElement(){
        return this.elementRef.current
    }

    /**
     * Given the key as a path, sets the value for the widget attribute
     * @param {string} path - path to the key, eg: styling.backgroundColor
     * @param {any} value 
     */
    setAttrValue(path, value){
        this.setState((prevState) => {
            // Split the path to access the nested property (e.g., "styling.backgroundColor")
            const keys = path.split('.')
            const lastKey = keys.pop()
            
            // Traverse the state and update the nested value immutably
            let newAttrs = { ...prevState.attrs }
            let nestedObject = newAttrs
    
            keys.forEach(key => {
                nestedObject[key] = { ...nestedObject[key] } // Ensure immutability
                nestedObject = nestedObject[key]
            })
            nestedObject[lastKey].value = value
    
            return { attrs: newAttrs }
        })
    }

    startResizing(corner, event) {
        event.stopPropagation()
        this.setState({ resizing: true, resizeCorner: corner })
    }

    setZIndex(zIndex){
        this.setState({
            zIndex: zIndex
        })
    }

    setWidgetName(name){

        this.setState((prev) => ({
            widgetName: name.length > 0 ? name : prev.widgetName 
        }))
    }

    setWidgetStyling(key, value){
        
        this.setState((prev) => ({
            widgetStyling: {
                ...prev.widgetStyling,
                [key]: value
            }
        }))

    }

    handleResize(event) {
        if (!this.state.resizing) return

        const { resizeCorner, size, pos } = this.state
        const deltaX = event.movementX
        const deltaY = event.movementY

        let newSize = { ...size }
        let newPos = { ...pos }
        
        const {width: minWidth, height: minHeight} = this.minSize
        const {width: maxWidth, height: maxHeight} = this.maxSize
        // console.log("resizing: ", deltaX, deltaY, event)

        switch (resizeCorner) {
            case "nw":
                newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width - deltaX))
                newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height - deltaY))
                newPos.x += (newSize.width !== size.width) ? deltaX : 0
                newPos.y += (newSize.height !== size.height) ? deltaY : 0
                break
            case "ne":
                newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width + deltaX))
                newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height - deltaY))
                newPos.y += (newSize.height !== size.height) ? deltaY : 0
                break
            case "sw":
                newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width - deltaX))
                newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height + deltaY))
                newPos.x += (newSize.width !== size.width) ? deltaX : 0
                break
            case "se":
                newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width + deltaX))
                newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height + deltaY))
                break
            default:
                break
        }

        this.setState({ size: newSize, pos: newPos })
    }

    stopResizing() {
        if (this.state.resizing) {
            this.setState({ resizing: false })
        }
    }

    openRenaming(){
        this.setState({
            selected: true,
            enableRename: true
        })
    }

    closeRenaming(){
        this.setState({
            enableRename: false
        })
    }

    renderContent(){
        // throw new NotImplementedError("render method has to be implemented")
        return (
            <div className="tw-w-full tw-h-full tw-rounded-md tw-bg-red-500" style={this.state.widgetStyling}>

            </div>
        )
    }

    /**
     * This is an internal methods don't override
     * @returns {HTMLElement}
     */
    render(){
        
        const widgetStyle = this.state.widgetStyling


        let outerStyle = {
            cursor: this.cursor,
            zIndex: this.state.zIndex,
            position: "absolute", //  don't change this if it has to be movable on the canvas
            top: `${this.state.pos.y}px`,  
            left: `${this.state.pos.x}px`,  
            width: `${this.state.size.width}px`,
            height: `${this.state.size.height}px`,
        }

        let selectionStyle = {
            x: "-5px",
            y: "-5px",
            width: this.boundingRect.width + 5,
            height: this.boundingRect.height + 5
        }

        // console.log("selected: ", this.state.selected)
        return (
            
            <div data-id={this.__id} ref={this.elementRef} className="tw-absolute tw-shadow-xl tw-w-fit tw-h-fit" 
                    style={outerStyle}
                >

                {this.renderContent()}
                <div className={`tw-absolute tw-bg-transparent tw-scale-[1.1] tw-opacity-100 
                                tw-w-full tw-h-full tw-top-0  
                                ${this.state.selected ? 'tw-border-2 tw-border-solid tw-border-blue-500' : 'tw-hidden'}`}>
                    
                    <div className="tw-relative tw-w-full tw-h-full">
                        <EditableDiv value={this.state.widgetName} onChange={this.setWidgetName}
                                        maxLength={40}
                                        openEdit={this.state.enableRename}
                                        className="tw-text-sm tw-w-fit tw-max-w-[160px] tw-text-clip tw-min-w-[150px] 
                                                    tw-overflow-hidden tw-absolute tw--top-6 tw-h-6"
                                />

                        <div
                            className="tw-w-2 tw-h-2 tw-absolute tw--left-1 tw--top-1 tw-bg-blue-500"
                            style={{ cursor: Cursor.NW_RESIZE }}
                            onMouseDown={(e) => this.startResizing("nw", e)}
                        />
                        <div
                            className="tw-w-2 tw-h-2 tw-absolute tw--right-1 tw--top-1 tw-bg-blue-500"
                            style={{ cursor: Cursor.SW_RESIZE }}
                            onMouseDown={(e) => this.startResizing("ne", e)}
                        />
                        <div
                            className="tw-w-2 tw-h-2 tw-absolute tw--left-1 tw--bottom-1 tw-bg-blue-500"
                            style={{ cursor: Cursor.SW_RESIZE }}
                            onMouseDown={(e) => this.startResizing("sw", e)}
                        />
                        <div
                            className="tw-w-2 tw-h-2 tw-absolute tw--right-1 tw--bottom-1 tw-bg-blue-500"
                            style={{ cursor: Cursor.SE_RESIZE }}
                            onMouseDown={(e) => this.startResizing("se", e)}
                        />

                    </div>

                

                </div>
            </div>
        )

    }

}   


export default Widget