import { Col, Input, Row, Space } from 'antd'
import React, { useState } from 'react'
import styled from 'styled-components'
import { DndProvider, useDrop } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import DraggableButton from './draggable-button'
import { useImmer } from 'use-immer'

export const ComponentBuildPage2: React.FC = () => {

    const [width, setWidth] = useState(1)
    const [height, setHeight] = useState(1)

    const [droppedList, setDroppedList] = useImmer([])
    const [buttons, setButtons] = useImmer([
        {
            label: "Widget",
            id: 1,
            width: 3,
            height: 1,
        },
        {
            label: "Widget",
            id: 2,
            width: 2,
            height: 1,
        },
        {
            label: "Widget",
            id: 3,
            width: 1,
            height: 1,
        },
        {
            label: "Widget",    
            id: 4,
            width: 1,
            height: 1,
        },

    ])

    const [{ isOver }, drop] = useDrop(() => ({
        accept: "buton",
        drop: (droppedItem) => { dropImageToBoard(droppedItem) },
        collect: (monitor) => ({
            isOver: !!monitor.isOver(),
        })
    }));

    let dropImageToBoard = (droppedItem) => {
        if (droppedItem?.id) {
            setButtons(buttons=>{
                return buttons
            })
            const newButton = buttons.find(b => b.id == droppedItem.id)
            setDroppedList((list) => [...list, newButton])
            setButtons(btns => btns.filter(btn => btn.id !== droppedItem.id))
        }
    }

    const createWidget = () => {
        setButtons(btns => [...btns, {
            label: "Widgett",
            id: generateUniqueId(),
            width,
            height,
        }])

    }

    const generateUniqueId = () => {
        const combinedArray = [...buttons, ...droppedList];
        let id = 1;
        while (combinedArray.some(obj => obj.id === id)) {
            id++;
        }
        return id;
    }


    return <Wrapper>


        <div ref={drop} >
            {[...Array(8)].map((e, j) => <Row key={j} gutter={[48, 48]}>
                {[...Array(24)].map((e, i) => <Col key={i + 1} span={1}>
                    <div className='cell' >
                        {
                            droppedList[(((i + 1) + (j * 24)) - 1)] ? <DraggableButton id={droppedList[(((i + 1) + (j * 24)) - 1)].id} >{`${droppedList[(((i + 1) + (j * 24)) - 1)].width} x ${droppedList[(((i + 1) + (j * 24)) - 1)].height}`}</DraggableButton> : <span>{((i + 1) + (j * 24))}</span>
                        }
                    </div>
                </Col>)}
            </Row>)}
        </div>

        <div className='tools' >
            <div className='d-flex align-items-center'>
                &lt;Input.Group compact&gt;
                    &lt;Input disabled  width: '15%' }} value={"Width"} /&gt;
                    &lt;Input  =&gt; { setWidth(parseInt(e.target.value)) }}  width: '15%' }} value={width} />
                    &lt;Input disabled  width: '15%' }} value={"Height"} /&gt;
                    &lt;Input  =&gt; { setHeight(parseInt(e.target.value)) }}  width: '15%' }} value={height} />
                &lt;/Input.Group&gt;
                <button  >Create Widget</button>
            </div>
            <div className='draggable-items' >
                {buttons.map((btn, i) => <DraggableButton key={btn.id} id={btn.id} >{`${btn.width} x ${btn.height}`}</DraggableButton>)}
            </div>
        </div>


    </Wrapper >
}

const Wrapper = styled('div')`
    padding: 0 50px;
    font-family: 'Roboto';

    .ant-col{
        padding: 0 !important;
    }

    .cell{
        width: 100%;
        height: 100%;
        min-height: 60px;
        background-color: aliceblue;
        border: 1px solid lightgrey;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tools{
        margin-top: 16px;
        display: flex;
        flex-flow: column;
        align-items: start;
        justify-content: start;
        gap: 16px;
    }

`