import React from 'react';
import uid from 'uuid/v4';
import { faker } from '@faker-js/faker/locale/fr';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import _ from 'lodash';

import {
    ProjectsList
} from "../../components/ProjectsDashboards/ProjectsList";

const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
  
    return result;
};

export class DraggableProjects extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            projects: [
                {
                    id: uid(),
                    title: faker.commerce.productName(),
                    badgeColor: "success",
                    badgeTitle: "Active",
                    progressValue: "76",
                    completeValue: "13",
                    myTasksValue: "35",
                    daysDueValue: "6"
                }, {
                    id: uid(),
                    title: faker.commerce.productName(),
                    badgeColor: "danger",
                    badgeTitle: "Suspended",
                    progressValue: "23",
                    completeValue: "6",
                    myTasksValue: "87",
                    daysDueValue: "15"
                }, {
                    id: uid(),
                    title: faker.commerce.productName(),
                    badgeColor: "secondary",
                    badgeTitle: "Archived",
                    progressValue: "4",
                    completeValue: "98",
                    myTasksValue: "21",
                    daysDueValue: "7"
                }, {
                    id: uid(),
                    title: faker.commerce.productName(),
                    badgeColor: "warning",
                    badgeTitle: "Paused",
                    progressValue: "63",
                    completeValue: "98",
                    myTasksValue: "21",
                    daysDueValue: "7"
                }
            ]
        };

        this.onDragEnd = this.onDragEnd.bind(this);
    }

    onDragEnd(result) {
        if (!result.destination) {
            return;
        }
      
        const projects = reorder(
            this.state.projects,
            result.source.index,
            result.destination.index
        );
      
        this.setState({
            projects,
        });
    }

    render() {
        return (
            <DragDropContext onDragEnd={this.onDragEnd}>
                <Droppable droppableId="droppable">
                    {(provided, snapshot) => (
                        <div
                            className="list-group list-group-flush"
                            ref={provided.innerRef}
                        >
                            {_.map(this.state.projects, ({id, ...project}, index) => (
                                <Draggable key={id} draggableId={id} index={index}>
                                    {(provided, snapshot) => (
                                        <div 
                                            className="list-group-item"
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}
                                            style={{
                                                ...provided.draggableProps.style,
                                                borderLeft: snapshot.isDragging && '1px solid rgba(0, 0, 0, 0.125)',
                                                borderRight: snapshot.isDragging && '1px solid rgba(0, 0, 0, 0.125)'
                                            }}
                                        >
                                            <ProjectsList 
                                                { ...project }
                                            />
                                        </div>
                                    )}
                                </Draggable>
                            ))}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        );
    }
}