"use client";

import { Box, Tab, Tabs } from "@mui/material";
import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import BadItemHandleTab from "./BadItemHandleTab";
import StockIssueRecordTab from "./StockIssueRecordTab";
import ExpiryHandleTab from "./ExpiryHandleTab";

type TabValue = "badHandle" | "badRecord" | "expiryHandle" | "expiryRecord";

const SearchPage: React.FC = () => {
  const { t } = useTranslation("stockIssue");
  const [tab, setTab] = useState<TabValue>("badHandle");

  const handleTabChange = useCallback((_: React.SyntheticEvent, value: string) => {
    setTab(value as TabValue);
  }, []);

  return (
    <Box>
      <Tabs value={tab} onChange={handleTabChange} sx={{ mb: 2 }}>
        <Tab value="badHandle" label={t("Bad Item Handle")} />
        <Tab value="badRecord" label={t("Bad Item Records")} />
        <Tab value="expiryHandle" label={t("Expiry Item Handle")} />
        <Tab value="expiryRecord" label={t("Expiry Item Records")} />
      </Tabs>

      {tab === "badHandle" && <BadItemHandleTab />}
      {tab === "badRecord" && <StockIssueRecordTab kind="bad" />}
      {tab === "expiryHandle" && <ExpiryHandleTab />}
      {tab === "expiryRecord" && <StockIssueRecordTab kind="expiry" />}
    </Box>
  );
};

export default SearchPage;
