class DragDropContainer {
    onDragOverHandler(e) {
        // To help execution of onDragLeaveHandler added preventDefault();
        e.preventDefault()
    }

    /*
        on entering a drop-zone. highlighting the element.
    */
    onDragEnterHandler(e) {
        e.preventDefault();
        this.classList.add('list-hovered');
    }

    /*
        on leaving the drop-zone. removing the highlighter.
    */
    onDragLeaveHandler(e) {
        this.classList.remove('list-hovered');
    }
    
    /*
        Gets in sourceId from dataTransfer. destination id from dataset of the currentTarget element.
        once dropped. updates the store. And renders the DOM again. And clears the dataTransfer.
    */
    onDropHandler(event) {
        const sourceListId = parseInt(event.dataTransfer.getData('sourceListId'));
        const itemId = parseInt(event.dataTransfer.getData('itemId'));
        const listId = parseInt(event.currentTarget.dataset.listId);
        event.currentTarget.classList.remove('list-hovered');
        if(listId === sourceListId) return;
        const sourceListIndex = this.listStore.findIndex(list => list.id === sourceListId)
        const sourceListItems = [...this.listStore[sourceListIndex].items].filter((item) => item.id !== itemId);
        const dropItem = [...this.listStore[sourceListIndex].items].find((item) => item.id === itemId);
        const destinationListIndex = this.listStore.findIndex(list => list.id === listId);
        this.listStore[sourceListIndex].items = sourceListItems;
        this.listStore[destinationListIndex].items.push(dropItem);
        this.render()
        event.dataTransfer.clearData()
    }
    
    /*
        Sets dataTransfer that is used on onDropHandler.
        setTimeout is to avoid flick of disappearance of dragged object from source.
    */
    onDragStartHandler(event) {
        const { itemId } = event.currentTarget.dataset;
        const { listId } = event.currentTarget.closest('.list-drop-zone').dataset;
        event.dataTransfer.setData('sourceListId', listId);
        event.dataTransfer.setData('itemId', itemId)
        this.classList.add('list-hold');
        setTimeout(() => (this.classList.add('display-none')));
    }
    
    onDragEndHandler(event) {
        setTimeout(() => (this.classList.remove('list-hold')));
        this.classList.remove('display-none');
    }
}

class Main extends DragDropContainer {
    /*
        Bind the methods here as the context of this used from where it's being called. expected this should point to the present class.
    */
    constructor() {
        super()
        this.listStore = JSON.parse(localStorage.getItem('listStore')) || this.initialStore();
        this.listsCount = this.listStore.length;
        this.itemsCount = this.listStore.flatMap((list) => list.items).length;
        // parent class method. As it has properities that are set in this class. need to bind to this class.
        this.onDropHandler = this.onDropHandler.bind(this);
        this.addhandleEventListeners = this.addhandleEventListeners.bind(this);
        this.addItem = this.addItem.bind(this);
        this.onSave = this.onSave.bind(this);
        this.addList = this.addList.bind(this);
        this.editListText = this.editListText.bind(this);
        this.editText = this.editText.bind(this);
        this.deleteList = this.deleteList.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
    }

    /*
        Saves the list and item input fields value into listStore and updates the DOM.
    */
    onSave(event) {
        event.preventDefault()
        const listId = parseInt(event.currentTarget.closest('.list-drop-zone').dataset.listId);
        const listIndex = this.listStore.findIndex(list => list.id === listId);
        const { actionType } = event.currentTarget.dataset;
        if(actionType === 'item') {
            const itemId = parseInt(event.currentTarget.closest('.list-draggable').dataset.itemId);
            const itemIndex = this.listStore[listIndex].items.findIndex(item => item.id === itemId);
            const text = event.currentTarget.closest('.list-drop-zone').getElementsByTagName('textarea')[0].value;
            this.listStore[listIndex].items[itemIndex].text = text;
        } else {
            const text = event.currentTarget.closest('.list-header').getElementsByTagName('input')[0].value;
            this.listStore[listIndex].text = text;
        }
        this.render()
    }

    /*
        deletes the whole list.
    */
    deleteList(event) {
        const listId = parseInt(event.currentTarget.closest('.list-drop-zone').dataset.listId);
        this.listStore = this.listStore.filter(list => list.id !== listId);
        this.render();
    }

    /*
        deletes the selected item/card.
    */
    deleteItem(event) {
        const itemId = parseInt(event.currentTarget.closest('.list-draggable').dataset.itemId);
        const listId = parseInt(event.currentTarget.closest('.list-drop-zone').dataset.listId);
        const listIndex = this.listStore.findIndex(list => list.id === listId);
        this.listStore[listIndex].items = [...this.listStore[listIndex].items.filter(item => item.id !== itemId)]
        this.render()
    }

    /*
        Editing list text/header;
    */
    editListText(event) {
        const ele = event.currentTarget.closest('.list-header');
        const textContent = ele.textContent;
        ele.innerHTML = `<input class='edit-row-input' value="${textContent}"></input><button data-action-type='list' class="save-textarea-button">Save</button>`;
        const buttonElements = ele.getElementsByTagName('button');
        for(let i = 0; i < buttonElements.length; i++) {
            buttonElements[i].onclick = this.onSave;
        }
    }

    /*
        Editing item/card text.
    */
    editText(event) {
        const ele = event.currentTarget.closest('.list-draggable');
        const textContent = ele.textContent;
        ele.innerHTML = `<textarea cols="20" rows="3" class='edit-row-input'>${textContent}</textarea><button data-action-type='item' class="save-textarea-button">Save</button>`;
        const buttonElements = ele.getElementsByTagName('button');
        for(let i = 0; i < buttonElements.length; i++) {
            buttonElements[i].onclick = this.onSave;
        }
    }

    /*
        Adds new Item/Card with default Data.
    */
    addItem(event) {
        const listId = parseInt(event.currentTarget.closest('.list-drop-zone').dataset.listId);
        const listIndex = this.listStore.findIndex(list => list.id === listId)
        this.itemsCount += 1;
        this.listStore[listIndex].items.push({
            id: this.itemsCount,
            text: ''
        })
        this.render()
    }

    /*
        Initial listStore, used if localStorage has no value.
    */
    initialStore() {
        return [{
            id: 1,
            text: 'In Progress',
            items: [{
                id: 1,
                text: 'Things to be done.'
            }]
        }, {
            id: 2,
            text: 'Completed',
            items: []
        }]
    }

    /*
        Adds event listeners for all the DOM elements rendered. called as callback from render method.
    */
    addhandleEventListeners() {
        for(let i = 0; i < this.listStore.length; i++) {
            const list = this.listStore[i]
            const listElem = document.getElementById(`drop-zone-${list.id}`);
            listElem.ondragover = this.onDragOverHandler;
            listElem.ondrop = this.onDropHandler;
            listElem.ondragenter = this.onDragEnterHandler;
            listElem.ondragleave = this.onDragLeaveHandler;
            // listElem.onmouseover = (event) => {
            //     event.currentTarget.classList.add('display-inline')
            // }
            // listElem.onmouseout = (event) => {
            //     event.currentTarget.classList.remove('display-inline')
            // }
            const items = list.items;
            for(let j = 0; j < items.length; j++) {
                const item = document.getElementById(`draggable-${items[j].id}`)
                item.ondragstart = this.onDragStartHandler;
                item.ondragend = this.onDragEndHandler;
                // item.onmouseover = (event) => {
                //     event.currentTarget.classList.add('display-inline')
                // }
                // item.onmouseout = (event) => {
                //     event.currentTarget.classList.remove('display-inline')
                // }
            }
        }
        document.getElementById('add-list').onclick = this.addList;
        const addItems  = document.getElementsByClassName('add-item') //.onclick = this.addItem;
        for(let i = 0; i < addItems.length; i++) {
            addItems[i].onclick = this.addItem;
        }
        const listsHeader = document.getElementsByClassName('list-header');
        for(let i = 0; i < listsHeader.length; i++) {
            const actionItems = listsHeader[i].getElementsByTagName('i')
            actionItems[0].onclick = this.editListText
            actionItems[1].onclick = this.deleteList;
        }
        const itemsContent = document.getElementsByClassName('item-content')
        for(let i = 0; i < itemsContent.length; i++) {
            const actionItems = itemsContent[i].getElementsByTagName('i')
            actionItems[0].onclick = this.editText;
            actionItems[1].onclick = this.deleteItem;
        }
    }

    /*
        Adds in list and an item to store and updates the DOM.
    */
    addList() {
        this.listsCount += 1
        this.itemsCount += 1
        this.listStore.push({
            id: this.listsCount,
            text: 'List Name Here',
            items: [{
                id: this.itemsCount,
                text: 'Text Here'
            }]
        })
        this.render()
    }

    render() {
        let container = document.getElementById('container');
        container.innerHTML = '';
        for(let i = 0; i < this.listStore.length; i++) {
            const list = this.listStore[i]
            container.innerHTML += `
            <div class="list-drop-zone" id="drop-zone-${list.id}" data-list-id=${list.id}>
                <div class="list-header">${list.text}
                <div class="action-items">
                    <i class="fa fa-edit action-item"></i>
                    <i class="fa fa-trash action-item"></i>
                </div></div>
                ${list.items.map((item) => (`
                    <div class="list-draggable"
                        draggable="true" data-item-id=${item.id} id="draggable-${item.id}">
                        <div class="item-content">${item.text}
                        <div class="action-items">
                            <i class="fa fa-edit action-item"></i>
                            <i class="fa fa-trash action-item"></i>
                        </div>
                        </div>
                    </div>`)
                ).join('')}
                <div class="add-item">${list.items.length ? '+ Add another item' : '+ Add item'}</div>
            </div>
            `
        }
        this.addhandleEventListeners()
        localStorage.setItem('listStore', JSON.stringify(this.listStore))
    }
}

const app = new Main()
app.render()