import React from "react";

import MoveToInboxOutlinedIcon from "@mui/icons-material/MoveToInboxOutlined";
import VolunteerActivismOutlinedIcon from "@mui/icons-material/VolunteerActivismOutlined";
import { Typography } from "@mui/material";

import { ChipsSearchBar } from "../../../../components/ChipsSearchBar";
import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import { Tab } from "../../../../components/Tab";
import { Tabs } from "../../../../components/Tabs";
import { TitleBar } from "../../../../components/TitleBar";
import Content from "../../../../containers/Content";
import { useI18n } from "../../../../contexts/I18nContext";
import { LimitOffset, PageComponent } from "../../../../types";
import OrderAccordion from "../../components/order/OrderAccordion";
import { OrderListItem } from "../../types/order";

export const ShipmentListPage: PageComponent<LimitOffset<OrderListItem>> = ({
  data: { next: _next, previous: _previous, results },
}) => {
  const { t } = useI18n();

  return (
    <Page defaultTab="PENDING" tabSearchParam="state">
      <Header variant="opaque">
        <TitleBar title="Pickup">
          <ChipsSearchBar
            allowedTypes={["email", "phone", "purchase_number"]}
            placeholder="Search by email, phone, or number…"
          />
        </TitleBar>

        <Tabs>
          <Tab icon={<MoveToInboxOutlinedIcon />} label="New orders" value="PENDING" />
          <Tab
            icon={<VolunteerActivismOutlinedIcon />}
            label="Ready for pickup"
            value="READY_FOR_PICKUP"
          />
        </Tabs>
      </Header>

      <Content layout="fullWidth">
        {results.length === 0 ? (
          <Typography align="center" color="divider" m="0 auto">
            {t("No orders found")}
          </Typography>
        ) : (
          results.map((order) => <OrderAccordion key={order.reference} order={order} />)
        )}
      </Content>
    </Page>
  );
};

export default ShipmentListPage;