import React, { useState } from 'react'
import { Draggable } from 'react-beautiful-dnd'
import { Paper, makeStyles, InputBase, IconButton } from '@material-ui/core'

import { useDispatch, useSelector } from 'react-redux'
import DeleteForeverIcon from '@material-ui/icons/DeleteForever'
import {
  updateCardById,
  deleteCardById,
} from '../actions/actionCreators/cardActions'
import { createNewActivity } from '../actions/actionCreators/activityActions'

const useStyles = makeStyles((theme) => ({
  card: {
    padding: theme.spacing(1, 1, 1, 2),
    margin: theme.spacing(1),
    width: '230px',
    wordWrap: 'break-word',
    zIndex: '-100',
    '&:hover': {
      backgroundColor: '#EBECF0',
    },
  },
  delete: {
    position: 'absolute',
    right: 0,
    zIndex: 1000,
    top: 0,
    backgroundColor: '#EBECF0',
  },
}))

export default function Card({ task, index }) {
  const [editable, setEditable] = useState(false)
  const [title, setTitle] = useState(task.name)
  const [card, setCard] = useState(true)
  const [showDelete, setShowDelete] = useState(false)
  const classes = useStyles()
  const { token, user } = useSelector((state) => state.user)
  const dispatch = useDispatch()
  return (
    <Draggable draggableId={task._id} index={index}>
      {(provided) => (
        <div
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
        >
          {card && (
            <Paper
              className={classes.card}
              onMouseEnter={() => setShowDelete(true)}
              onMouseLeave={() => setShowDelete(false)}
              onClick={() => {
                setEditable(true)
              }}
            >
              {editable ? (
                <InputBase
                  onChange={(e) => {
                    e.preventDefault()
                    setTitle(e.target.value)
                  }}
                  multiline
                  fullWidth
                  value={title}
                  style={{ minHeight: '7px' }}
                  autoFocus
                  onFocus={(e) => {
                    const val = e.target.value
                    e.target.value = ''
                    e.target.value = val
                  }}
                  onBlur={() => {
                    setEditable(false)
                    const text = title.trim().replace(/\s+/g, ' ')
                    if (text === '') {
                      setTitle(task.name)
                      return
                    }
                    setTitle(text)
                    dispatch(updateCardById(task._id, { name: text }))
                    // eslint-disable-next-line no-param-reassign
                    task.name = text
                  }}
                />
              ) : (
                <div style={{ position: 'relative' }}>
                  <div>{task.name}</div>
                  {showDelete && (
                    <IconButton
                      className={classes.delete}
                      size="small"
                      onClick={() => {
                        setCard(false)
                        dispatch(deleteCardById(task._id))
                        const text = `${user.username} deleted card ${task.name}`
                        dispatch(
                          createNewActivity(
                            { text, boardId: task.boardId },
                            token,
                          ),
                        )
                      }}
                    >
                      <DeleteForeverIcon
                        fontSize="small"
                        style={{ backgroundColor: '#EBECF0' }}
                      />
                    </IconButton>
                  )}
                </div>
              )}
            </Paper>
          )}
        </div>
      )}
    </Draggable>
  )
}
