import React, { Fragment, useState } from 'react'
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
import IconButton from '@material-ui/core/IconButton'
import SvgIcon from '@material-ui/core/SvgIcon'
import { Grid, Button } from '@material-ui/core'
import { Breadcrumb } from 'app/components'
import CustomActionList from './ActionList'
import images from 'app/assets/images'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
    root: {
        margin: 'auto',
    },
    paper: {
        top: '30% !important',
        left: '40% !important',
        transform: 'translateX(-50%, -50%) !important',
    },
    button: {
        margin: theme.spacing(0.5, 0),
    },
    fillter: {
        marginBottom: 20,
    },
}))

const itemsFromBackend = [
    { id: '9b1deb4d2fd', content: 'First task' },
    { id: '9b1deb4d2ddsfse', content: 'Second task' },
    { id: '9b1deb4d2qq', content: 'Third task' },
    { id: '9b1deb4d2qqqq', content: 'Fourth task' },
    { id: '9b1deb4d2fd1231', content: 'First task' },
    { id: '9b1deb4d2ddsfse1231', content: 'Second task' },
    { id: '9b1deb4d2qq1232', content: 'Third task' },
    { id: '9b1deb4d2qq1232qq', content: 'Fourth task' },
    { id: '9b1deb4d2fd123', content: 'First task' },
    { id: '9b1deb4d2ddsfse12312', content: 'Second task' },
    { id: '9b1deb4d2qqlll', content: 'Third task' },
    { id: '9b1deb4d2qqlllqq', content: 'Fourth task' },
]

const columnsFromBackend = [
    {
        name: 'Requested',
        items: itemsFromBackend,
    },
    {
        name: 'To do',
        items: [],
    },
    {
        name: 'In Progress',
        items: [],
    },
    {
        name: 'Done',
        items: [],
    },
]

function App() {
    const [columns, setColumns] = useState(columnsFromBackend)
    const [valJob, setValJob] = useState('')
    const [showVal, setShowVal] = useState(false)
    const [saveItemVal, setSaveItemVal] = useState()
    const classes = useStyles()
    const onDragEnd = (result) => {
        if (!result.destination) return
        const { source, destination } = result
        if (source.droppableId !== destination.droppableId) {
            const sourceColumn = columns[source.droppableId]
            const destColumn = columns[destination.droppableId]
            const sourceItems = [...sourceColumn.items]
            const destItems = [...destColumn.items]
            const [removed] = sourceItems.splice(source.index, 1)
            destItems.splice(destination.index, 0, removed)
            setColumns({
                ...columns,
                [source.droppableId]: {
                    ...sourceColumn,
                    items: sourceItems,
                },
                [destination.droppableId]: {
                    ...destColumn,
                    items: destItems,
                },
            })
        } else {
            const column = columns[source.droppableId]
            const copiedItems = [...column.items]
            const [removed] = copiedItems.splice(source.index, 1)
            copiedItems.splice(destination.index, 0, removed)
            setColumns({
                ...columns,
                [source.droppableId]: {
                    ...column,
                    items: copiedItems,
                },
            })
        }
    }
    const handleDeleteJob = (item, columnId, columns) => {
        const tmp = columns[columnId].items
        const newData = tmp.filter((x) => x.id !== item.id)
        const sourceColumn = columns[columnId]
        const data = {
            ...columns,
            [columnId]: {
                ...sourceColumn,
                items: newData,
            },
        }
        setColumns(data)
    }
    const handleChangeVal = (e) => {
        setValJob(e.target.value)
    }
    const handleSaveVal = (val, columnId, columns) => {
        const sourceColumn = columns[columnId]
        let data = {}
        sourceColumn.items.map((item, index) => {
            if (item.id === val.id)
                data = {
                    ...columns,
                    [columnId]: {
                        ...sourceColumn,
                        items: [...sourceColumn.items],
                    },
                }
        })
        setShowVal(false)
        setValJob('')

        console.log('data', data)
        // setColumns(data)
    }
    const handleUpdateJob = (item) => {
        setShowVal(true)
        setSaveItemVal(item)
    }
    return (
        <Fragment
        // style={{
        //     backgroundImage: `url(${images.bgJob})`,
        //     backgroundPosition: '50%',
        //     backgroundSize: 'cover',
        // }}
        >
            <div className="m-sm-30">
                <div className="mb-sm-30">
                    <Breadcrumb
                        routeSegments={[
                            {
                                name: 'Quản lý công việc',
                                path: '/manage-job',
                            },
                        ]}
                    />
                </div>
                <Grid
                    style={{
                        display: 'flex',
                        marginTop: '30px',
                    }}
                >
                    <DragDropContext onDragEnd={(result) => onDragEnd(result)}>
                        {Object.entries(columns).map(([columnId, column]) => {
                            return (
                                <Grid
                                    style={{
                                        display: 'flex',
                                        flexWrap: 'wrap',
                                        flexDirection: 'column',
                                        alignItems: 'center',
                                    }}
                                    key={columnId}
                                    item
                                    lg={3}
                                    md={3}
                                    sm={6}
                                    xs={12}
                                >
                                    <Grid style={{ margin: 8 }}>
                                        <Droppable
                                            droppableId={columnId}
                                            key={columnId}
                                        >
                                            {(provided, snapshot) => {
                                                return (
                                                    <div
                                                        {...provided.droppableProps}
                                                        ref={provided.innerRef}
                                                        style={{
                                                            background:
                                                                '#ebecf0',
                                                            padding: 10,
                                                            width: 250,
                                                            height: 500,
                                                            overflowY: 'auto',
                                                            aoverflowX:
                                                                'hidden',
                                                            borderRadius: '3px',
                                                        }}
                                                    >
                                                        <h5>{column.name}</h5>
                                                        {column.items.map(
                                                            (item, index) => {
                                                                return (
                                                                    <Draggable
                                                                        key={
                                                                            item.id
                                                                        }
                                                                        draggableId={
                                                                            item.id
                                                                        }
                                                                        index={
                                                                            index
                                                                        }
                                                                    >
                                                                        {(
                                                                            provided,
                                                                            snapshot
                                                                        ) => {
                                                                            return (
                                                                                <div
                                                                                    ref={
                                                                                        provided.innerRef
                                                                                    }
                                                                                    {...provided.draggableProps}
                                                                                    {...provided.dragHandleProps}
                                                                                    style={{
                                                                                        userSelect:
                                                                                            'none',
                                                                                        display:
                                                                                            'flex',
                                                                                        justify:
                                                                                            'space-between',
                                                                                        alignItems:
                                                                                            'center',
                                                                                        padding:
                                                                                            '0 16px',
                                                                                        margin: '0 0 8px 0',
                                                                                        borderRadius:
                                                                                            '4px',
                                                                                        position:
                                                                                            'relative',
                                                                                        minHeight:
                                                                                            '35px',
                                                                                        backgroundColor:
                                                                                            '#ffffff',
                                                                                        color: '#222224',

                                                                                        ...provided
                                                                                            .draggableProps
                                                                                            .style,
                                                                                    }}
                                                                                >
                                                                                    {showVal &&
                                                                                    saveItemVal.id ===
                                                                                        item.id ? (
                                                                                        <>
                                                                                            <input
                                                                                                type="text"
                                                                                                defaultValue={
                                                                                                    item.content
                                                                                                }
                                                                                                onChange={(
                                                                                                    e
                                                                                                ) =>
                                                                                                    handleChangeVal(
                                                                                                        e
                                                                                                    )
                                                                                                }
                                                                                            />
                                                                                            <div
                                                                                                onClick={() =>
                                                                                                    handleSaveVal(
                                                                                                        item,
                                                                                                        columnId,
                                                                                                        columns
                                                                                                    )
                                                                                                }
                                                                                            >
                                                                                                Lưu
                                                                                            </div>
                                                                                        </>
                                                                                    ) : (
                                                                                        <>
                                                                                            {
                                                                                                item.content
                                                                                            }
                                                                                            <CustomActionList
                                                                                                item={
                                                                                                    item
                                                                                                }
                                                                                                columnId={
                                                                                                    columnId
                                                                                                }
                                                                                                columns={
                                                                                                    columns
                                                                                                }
                                                                                                handleDeleteJob={
                                                                                                    handleDeleteJob
                                                                                                }
                                                                                                handleUpdateJob={
                                                                                                    handleUpdateJob
                                                                                                }
                                                                                            />
                                                                                        </>
                                                                                    )}
                                                                                </div>
                                                                            )
                                                                        }}
                                                                    </Draggable>
                                                                )
                                                            }
                                                        )}
                                                        {provided.placeholder}
                                                    </div>
                                                )
                                            }}
                                        </Droppable>
                                    </Grid>
                                </Grid>
                            )
                        })}
                    </DragDropContext>
                </Grid>
            </div>
        </Fragment>
    )
}

export default App
