import React from 'react';
import { useHistory } from 'react-router-dom';
import Button from '../../components/Button';
import { patch, baseURL } from '../../requests';
import { PanelProps } from '../../lib/ServiceContext';
import { Waybill } from '../types';


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

  const handleChangeStatus = (status: Waybill['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="lg:m-4 p-4 flex flex-col lg:pl-16 lg:border-l">
      <div className="grid lg:grid-cols-2">
        <Button route={`/contractors/${item.contractorId}`} variant="outlined">
          Перейти к контрагенту
        </Button>
        <Button onClick={handlePrint} variant="outlined">
          Печать
        </Button>
        <span className="text-lg text-center mt-4">Итоговая сумма: ${item.total}</span>
        <Button onClick={executed ? handleCancel : handleExecute} size="lg">
          {executed ? 'Откатить' : 'Провести'}
        </Button>
      </div>
    </div>
  );
};

export default WaybillPanel;