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


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

  const handleExecute = () => post(`/waybills/${item._id}/execute`)
    .then(() => history.push('/waybills'));

  const handleCancel = () => post(`/waybills/${item._id}/cancel`)
    .then(() => history.push('/waybills'));

  const executed = item.status === 'executed';
  const total = item.product.price * item.quantity;

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

export default WaybillPanel;