import React from 'react';
import { useHistory } from 'react-router-dom';
import Input from '../components/Input';
import Button from '../components/Button';
import Paper from '../components/Paper';
import { patch, get, baseURL } from '../requests';
import { PanelProps } from './Service/ServiceContext';


const WaybillPanel: React.FC<PanelProps> = ({ item, mutate }) => {
  const history = useHistory();

  const handleChangeStatus = status => patch(`/waybills/${item._id}`, { status })
    .then(() => {
      history.push('/waybills');
      mutate({ ...item, status });
    });

  const handlePrint = () => window.open(`${baseURL}/spreadsheets/${item._id}`, '_blank');

  const handleExecute = () => handleChangeStatus('executed');
  const handleCancel = () => handleChangeStatus('cancelled');

  const executed = item.status === 'executed';

  return (
    <div className="m-4 p-4 pl-16 border-l flex flex-col">
      <p className="text-lg">
        Итоговая сумма: ${item.total}
      </p>
      <Button route={`/contractors/${item.contractorId}`} variant="outlined">
        Перейти к контрагенту
      </Button>
      <Button onClick={handlePrint}>
        Печать
      </Button>
      {
        executed
          ? <Button onClick={handleCancel}>Откатить</Button>
          : <Button onClick={handleExecute}>Провести</Button>
      }
    </div>
  );
};

export default WaybillPanel;