import React, { useState } from 'react'
import { Droppable, Draggable } from 'react-beautiful-dnd'
import { useDispatch, useSelector } from 'react-redux'
import { Paper, makeStyles, InputBase, IconButton } from '@material-ui/core'
import AddIcon from '@material-ui/icons/Add'
import DeleteIcon from '@material-ui/icons/Delete'
import Card from './Card'
import InputCard from './InputCard'
import { createNewCard } from '../actions/actionCreators/cardActions'
import midString from '../ordering/ordering'
import { createNewActivity } from '../actions/actionCreators/activityActions'
import AddItem from './AddItem'
import {
  updateListById,
  deleteListById,
} from '../actions/actionCreators/listActions'

const useStyles = makeStyles((theme) => ({
  root: {
    width: '272px',
    backgroundColor: '#EBECF0',
    marginLeft: theme.spacing(1),
    wordWrap: 'break-word',
  },
  scroll: {
    maxHeight: '500px',
    overflow: 'auto',
    overflowX: 'hidden',
    // overflowY: 'auto',
    margin: 0,
    padding: 0,
    listStyle: 'none',
    height: '100%',
    '&::-webkit-scrollbar': {
      width: '0.4em',
    },
    '&::-webkit-scrollbar-track': {
      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
      webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: 'rgba(0,0,0,.1)',
      outline: '1px solid green',
    },
  },
  title: {
    padding: theme.spacing(1, 1, 1, 1),
    minWidth: '100px',
    marginLeft: theme.spacing(1.5),
    fontWeight: 'bold',
  },
  wrapper: {
    marginTop: theme.spacing(10.3),
  },
  editable: {
    marginLeft: theme.spacing(-1),
    wordWrap: 'break-word',
    padding: theme.spacing(0, 1, 0, 1),
    boxShadow: 'inset 0 0 0 2px #0079bf',
    width: '210px',
    borderRadius: 4,
  },
}))

export default function Column({ column, tasks, index }) {
  const classes = useStyles()
  const [cardTitle, setCardTitle] = useState('')
  const [listTitle, setListTitle] = useState(column.name)
  const [addCardFlag, setAddCardFlag] = useState(false)
  const [editable, setEditable] = useState(false)
  const [list, setList] = useState(true)
  const [showDelete, setShowDelete] = useState(false)
  const { token, user } = useSelector((state) => state.user)
  const dispatch = useDispatch()

  const handleChange = (e) => {
    e.preventDefault()
    setCardTitle(e.target.value)
  }

  const submitHandler = () => {
    if (cardTitle === '') return
    const text = cardTitle.trim().replace(/\s+/g, ' ')
    setCardTitle(text)
    const totalTasks = tasks.length
    const postCardReq = {
      name: text,
      boardId: column.boardId,
      listId: column._id,
      order:
        totalTasks === 0 ? 'n' : midString(tasks[totalTasks - 1].order, ''),
    }
    dispatch(createNewCard(postCardReq, token))
    dispatch(
      createNewActivity(
        {
          text: `${user.username} added ${text} to ${column.name}`,
          boardId: column.boardId,
        },
        token,
      ),
    )
    setCardTitle('')
  }
  const handleAddition = () => {
    setAddCardFlag(true)
  }
  const closeButtonHandler = () => {
    setAddCardFlag(false)
    setCardTitle('')
  }
  const changedHandler = (e) => {
    e.preventDefault()
    setListTitle(e.target.value)
  }
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault()
      submitHandler()
    }
  }
  const updateListTitle = () => {
    const text = listTitle.trim().replace(/\s+/g, ' ')
    if (text === '') {
      setListTitle(column.name)
      setEditable(false)
      return
    }
    setListTitle(text)
    dispatch(updateListById(column._id, { name: listTitle }))
    // eslint-disable-next-line no-param-reassign
    column.name = text
    setEditable(false)
  }

  return (
    <div className={classes.wrapper}>
      {list && (
        <Draggable draggableId={column._id} index={index}>
          {(provided) => (
            <div {...provided.draggableProps} ref={provided.innerRef}>
              <Paper
                elevation={0}
                onMouseEnter={() => setShowDelete(true)}
                onMouseLeave={() => setShowDelete(false)}
                className={classes.root}
                {...provided.dragHandleProps}
              >
                <div
                  className={classes.title}
                  onClick={() => setEditable(true)}
                >
                  {!editable && (
                    <div style={{ position: 'relative' }}>
                      <div>{column.name}</div>
                      {showDelete && (
                        <IconButton
                          size="small"
                          style={{
                            right: 0,
                            top: 0,
                            position: 'absolute',
                            backgroundColor: '#EBECF0',
                            zIndex: 100,
                          }}
                          onClick={() => {
                            setList(false)
                            dispatch(deleteListById(column._id))
                            const text = `${user.username} deleted list ${column.name}`
                            dispatch(
                              createNewActivity(
                                { text, boardId: column.boardId },
                                token,
                              ),
                            )
                          }}
                        >
                          <DeleteIcon
                            fontSize="small"
                            style={{ backgroundColor: '#EBECF0' }}
                          />
                        </IconButton>
                      )}
                    </div>
                  )}
                  {editable && (
                    <div className={classes.editable}>
                      <InputBase
                        onChange={changedHandler}
                        multiline
                        fullWidth
                        value={listTitle}
                        style={{ fontWeight: 'bold' }}
                        autoFocus
                        onFocus={(e) => {
                          const val = e.target.value
                          e.target.value = ''
                          e.target.value = val
                        }}
                        onBlur={updateListTitle}
                      />
                    </div>
                  )}
                </div>
                <Droppable droppableId={column._id} type="card">
                  {
                    // eslint-disable-next-line no-shadow
                    (provided) => (
                      <div ref={provided.innerRef} {...provided.droppableProps}>
                        <div className={classes.scroll}>
                          {/* eslint-disable-next-line no-shadow */}
                          {tasks.map((task, index) => (
                            <Card key={task._id} task={task} index={index} />
                          ))}
                          {addCardFlag && (
                            <InputCard
                              value={cardTitle}
                              changedHandler={handleChange}
                              itemAdded={submitHandler}
                              closeHandler={closeButtonHandler}
                              keyDownHandler={handleKeyDown}
                              type="card"
                              btnText="Add Card"
                              placeholder="Enter a title for this card..."
                              width="230px"
                            />
                          )}
                          {provided.placeholder}
                        </div>
                        {!addCardFlag && (
                          <AddItem
                            handleClick={handleAddition}
                            icon={<AddIcon />}
                            btnText="Add another card"
                            type="card"
                            width="256px"
                          />
                        )}
                      </div>
                    )
                  }
                </Droppable>
              </Paper>
            </div>
          )}
        </Draggable>
      )}
    </div>
  )
}