import { makeStyles } from "@material-ui/core/styles";
import CloseIcon from '@mui/icons-material/Close';
import EditIcon from '@mui/icons-material/Edit';
import ListItemText from '@mui/material/ListItemText';

import { TMessage } from "../../../../../../typescript/redux/messages/types";

const useStyles = makeStyles({   
  editTop : {
    position: 'absolute',
    left: 0,
    top: '-7vh',
    height: '6vh',
    width: '100%',
    borderRadius: 8,
    display: 'flex',
    flexWrap: 'nowrap',
    alignContent: 'center',
    alignItems: 'center',
    color: '#6b6b6b',
    border:'solid 2px rgb(41, 139, 231)',
    backgroundColor: '#ffffff',
    padding: '0px 5px',
    zIndex:2,
  },
  editListWrapper: {
    width: '100%',
    wordBreak: 'break-word',
    overflowY: "auto",
    height: '6vh',
  },  
  editIconClose: {
    cursor: 'pointer',
    marginLeft: 5,
    marginRight: 5,
    '&:hover': {
      color:'#f02a2a',
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },
  editColumn: {
    height: '80%',
    width: 2,
    backgroundColor: 'rgb(41, 139, 231)',
    marginRight:10
  }, 
});

interface IEditBar {
  isEdit:TMessage,
  handleCloseEdit: () => void,
  handleScrollToTheMessage:(_id:string) => void
}

const EditBar = ({ isEdit, handleCloseEdit,handleScrollToTheMessage }: IEditBar) => {
  const classes = useStyles();
  
  return (
    <div className={classes.editTop}>
      <EditIcon style={{margin:'0px 7px',color: "rgb(41, 139, 231)"}}/>
      <div className={classes.editColumn}></div>
        <ul className={classes.editListWrapper}>
          <li onClick={() => handleScrollToTheMessage(isEdit._id)}>
            <ListItemText
              primary={`Edit ${isEdit.type === 'text'?'Message and Caption':'only Caption'}`}
              primaryTypographyProps={{ color: "rgb(41, 139, 231)",fontSize:16 }}
              secondary={isEdit.type === 'text' ? `Message: ${isEdit.message} , Caption: ${isEdit.caption}`:`Caption: ${isEdit.caption}`}
              secondaryTypographyProps={{ fontSize: 16}} />
          </li>
      </ul>
      <CloseIcon onClick={handleCloseEdit} className={classes.editIconClose} />
    </div>
  )
}

export default EditBar