ItemCardAction.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState}  from 'react';
import styled from 'styled-components';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import Button from '@material-ui/core/Button';
import gem from '../img/gamification/gem.svg';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import axios from 'axios'
import {apiUrl} from '../env';

function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

const actionStyle = (operation) => {
	var stl = {
		fontSize: '0.5em',
		paddingTop: '1em',
		marginBottom: 0,
		fontWeight: 'bold',
		cursor: 'pointer'
	}
	stl.color = operation !== 'buy' ? '#02a5c3' : '#666666';
	return stl;
}

const GemImg = styled.img`
	height: 23px;
	position: relative;
	top: 8px;
	padding-right: 5px;
`

const GemSpan = styled.span`
	color: red;
`

export default function ItemCardAction (props) {
	const [success, setSuccess] = useState(false);
	const [failure, setFailure] = useState(false);
	const [message, setMessage] = useState("");
	const [info, setInfo] = useState(false);
	// eslint-disable-next-line
	const [item_id, setItemID] = useState(0);
	const [last_operation, setLastOperation] = useState();
	const [open_dialog, setOpenDialog] = useState(false);


	const revertLastOperation = () => {
		manageItemAndShowSnackbar(last_operation === 'equip' ? 'unequip' : 'equip', 
			setInfo, 
			nonPurchaseMessage,
			'Erro');
	}

	const nonPurchaseMessage = <span>Item {last_operation === 'equip' ? 'retirado' : 'equipado'}. <div onClick={revertLastOperation}>Desfazer</div></span>;


	const handleClose = (snackbar) => {
		if (snackbar === 'success')
			setSuccess(false);
		else if (snackbar === 'info')
			setInfo(false);
		else
			setFailure(false);
	}

	const manageItemAndShowSnackbar = (operation, setSnackbar, successMessage, failureMessage) => {
		axios.patch(apiUrl + '/users/' + operation + '_item?id=' + item_id).then(
			response => {
				if (response.status === 200) {
					setSnackbar(true);
					setMessage(successMessage);
				} else {
					setFailure(true);
					setMessage(failureMessage);
				}
			}
		);
		setLastOperation(operation === 'purchase' ? last_operation : (operation === 'equip' ? 'unequip' : 'equip'));
	}
	
	const handleClickBuyItem = () => {
			setOpenDialog(false);
			manageItemAndShowSnackbar('purchase', setSuccess, <span>Item comprado.</span>, 
																<span>Compra falhou. Tente novamente</span>);
	}

	const handleDialogClose = () => {
		setOpenDialog(false);
	}

	const handleClick = () => {
		// this will become an axios get
		if (props.operation === 'unequip')
			manageItemAndShowSnackbar('unequip', setInfo, nonPurchaseMessage, 'Erro');
		else if (props.operation === 'equip')
			manageItemAndShowSnackbar('equip', setInfo, nonPurchaseMessage, 'Erro');
		else if (props.operation === 'buy') {
			setOpenDialog(true);
		}
	}

	return (
		<div>
			<Snackbar open={info} autoHideDuration={6000} onClose={() => handleClose('info')}>
					<Alert onClose={handleClose} severity="info">
						{message}
					</Alert>
      </Snackbar>
			<Snackbar open={success} autoHideDuration={6000} onClose={() => handleClose('success')}>
					<Alert onClose={handleClose} severity="success">
						{message}
					</Alert>
      </Snackbar>
			<Snackbar open={failure} autoHideDuration={6000} onClose={() => handleClose('failure')}>
					<Alert onClose={handleClose} severity="error">
						{message}
					</Alert>
      </Snackbar>
			<span style={actionStyle(props.operation)} onClick={handleClick}>
				{props.operation === 'buy' ? <GemImg src={gem}/> : <span/>}
				{props.operation === 'buy' ? "COMPRAR" :
						props.operation === 'equip' ? "USAR" : "TIRAR"}
			</span>
			<Dialog
        open={open_dialog}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{"Deseja realmente comprar este item?"}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
						<strong>Esta compra não envolve nenhum dinheiro real.</strong>

						<br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa 
						<GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui 
						<GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.

						<br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleDialogClose} color="primary">
            Cancelar
          </Button>
          <Button onClick={handleClickBuyItem} color="primary" autoFocus>
            Comprar
          </Button>
        </DialogActions>
      </Dialog>
		</div>
	)
}