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 } from '../requests';
import { PanelProps } from './Service/ServiceContext';


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

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

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

  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>
      {
        executed
          ? <Button onClick={handleCancel}>Откатить</Button>
          : <Button onClick={handleExecute}>Провести</Button>
      }
    </div>
  );
};

export default WaybillPanel;