import React from "react";

import ReceiptLongOutlinedIcon from "@mui/icons-material/ReceiptLongOutlined";

import { useSnackbar } from "notistack";

import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import { Tab } from "../../../../components/Tab";
import { TabPanel } from "../../../../components/TabPanel";
import { TabPanels } from "../../../../components/TabPanels";
import { Tabs } from "../../../../components/Tabs";
import { TitleBar } from "../../../../components/TitleBar";
import Content, { TwoColumn } from "../../../../containers/Content";
import { useApi } from "../../../../contexts/ApiContext";
import { PageComponent } from "../../../../types";
import { formatPurchaseNumber } from "../../../../util/format_purchase_number";
import CustomerCard from "../../components/CustomerCard";
import { ReceiptCard } from "../../components/ReceiptCard";
import { Line, PurchaseDetail } from "../../types/purchase";

const PurchaseDetailPage: PageComponent<PurchaseDetail> = ({ data: purchase, refresh }) => {
  const api = useApi();
  const { enqueueSnackbar } = useSnackbar();

  const doRefund = (lines: Line[]) => {
    api.operations["pos.purchase:refund-items"]
      .call({
        params: { purchase_number: purchase.number },
        body: lines.map(({ reference, quantity }) => ({ reference, quantity })),
      })
      .then((response) => {
        if (response.ok) {
          enqueueSnackbar("Successfully refunded", {
            variant: "success",
          });
          refresh();
        } else {
          enqueueSnackbar("Failed to refund", {
            variant: "error",
          });
          throw response;
        }
      });
  };

  return (
    <Page>
      <Header variant="opaque">
        <TitleBar title={`Purchase ${formatPurchaseNumber(purchase.number)}`} />
        <Tabs data={purchase}>
          <Tab key="default" icon={<ReceiptLongOutlinedIcon />} label="Receipt" value="default" />
        </Tabs>
      </Header>

      <TabPanels contribParams={{ purchase_number: purchase.number }}>
        <TabPanel key="default" value="default">
          <Content layout="fixedWidth">
            <TwoColumn>
              {purchase.lines.length > 0 && <ReceiptCard purchase={purchase} refund={doRefund} />}
              <CustomerCard purchase={purchase} />
            </TwoColumn>
          </Content>
        </TabPanel>
      </TabPanels>
    </Page>
  );
};

export default PurchaseDetailPage;