import React, { useContext, useState } from "react";
import { useHistory } from "react-router-dom";

import { makeStyles } from "@material-ui/core/styles";
import { IconButton } from "@material-ui/core";
import { MoreVert, Replay } from "@material-ui/icons";

import { i18n } from "../../translate/i18n";
import api from "../../services/api";
import TicketOptionsMenu from "../TicketOptionsMenu";
import ButtonWithSpinner from "../ButtonWithSpinner";
import toastError from "../../errors/toastError";
import { AuthContext } from "../../context/Auth/AuthContext";

import Modal from "../ChatEnd/ModalChatEnd";  
import { render } from '@testing-library/react';

const useStyles = makeStyles(theme => ({
	actionButtons: {
		marginRight: 6,
		flex: "none",
		alignSelf: "center",
		marginLeft: "auto",
		"& > *": {
			margin: theme.spacing(1),
		},
	},
}));

const TicketActionButtons = ({ ticket, schedule }) => {
	const classes = useStyles();
	const history = useHistory();
	const [anchorEl, setAnchorEl] = useState(null);
	const [loading, setLoading] = useState(false);
	const ticketOptionsMenuOpen = Boolean(anchorEl);
	const { user } = useContext(AuthContext);
 
	const handleOpenTicketOptionsMenu = e => {
		setAnchorEl(e.currentTarget);
	};

	const handleCloseTicketOptionsMenu = e => {
		setAnchorEl(null);
	};

 
	const chatEndVal = (data) => { 
		
		if(data){

			data = {...data, 'ticketId': ticket.id}
			
			console.log('ChatEnd: ',(data));  

			handleUpdateTicketStatus(null, "closed", user?.id, data)

		} 
		 
	}


	const handleModal =  (/*status, userId*/) => {

		render(<Modal 
				modal_header={'Finalização de Atendimento'} 
				func={chatEndVal}  
				schedules={schedule} 
				ticketId={ticket.id}
				/>) 
		 
	};
 

	const handleUpdateTicketStatus = async (e, status, userId, schedulingData={}) => {
 
			setLoading(true);
			try {
				
				if(status==='closed'){

					await api.put(`/tickets/${ticket.id}`, {
						status: status,
						userId: userId || null, 
						schedulingNotifyData: JSON.stringify(schedulingData) 
					});

				}
				else{
					
					await api.put(`/tickets/${ticket.id}`, {
						status: status,
						userId: userId || null 
					});

				} 

				setLoading(false);
				if (status === "open") {
					history.push(`/tickets/${ticket.id}`);
				} else {
					history.push("/tickets");
				}
			} catch (err) {
				setLoading(false);
				toastError(err);
			} 
		  
		

		
	};

	return (
		<div className={classes.actionButtons}>
			{ticket.status === "closed" && (
				<ButtonWithSpinner
					loading={loading}
					startIcon={<Replay />}
					size="small"
					onClick={e => handleUpdateTicketStatus(e, "open", user?.id)}
				>
					{i18n.t("messagesList.header.buttons.reopen")}
				</ButtonWithSpinner>
			)}
			{ticket.status === "open" && (
				<>
					<ButtonWithSpinner
						loading={loading}
						startIcon={<Replay />}
						size="small"
						onClick={e => handleUpdateTicketStatus(e, "pending", null)}
					>
						{i18n.t("messagesList.header.buttons.return")}
					</ButtonWithSpinner>
					
					<ButtonWithSpinner
						loading={loading}
						size="small"
						variant="contained"
						color="primary"
						onClick={e => { 

							
							handleModal() 
							// handleUpdateTicketStatus(e, "closed", user?.id)

						}}
					>
						{i18n.t("messagesList.header.buttons.resolve")}
					</ButtonWithSpinner>

					<IconButton onClick={handleOpenTicketOptionsMenu}>
						<MoreVert />
					</IconButton>
					<TicketOptionsMenu
						ticket={ticket}
						anchorEl={anchorEl}
						menuOpen={ticketOptionsMenuOpen}
						handleClose={handleCloseTicketOptionsMenu}
					/>
				</>
			)}
			{ticket.status === "pending" && (
				<ButtonWithSpinner
					loading={loading}
					size="small"
					variant="contained"
					color="primary"
					onClick={e => handleUpdateTicketStatus(e, "open", user?.id)}
				>
					{i18n.t("messagesList.header.buttons.accept")}
				</ButtonWithSpinner>
			)}
		</div>
	);
};

export default TicketActionButtons;