"use client";

import { Box, Tab, Tabs } from "@mui/material";
import React from "react";
import { useTranslation } from "react-i18next";
import JoWorkbenchSearch from "@/components/JoWorkbench/JoWorkbenchSearch";
import JoPickOrderList from "@/components/JoWorkbench/JoPickOrderList";
import type { SearchJoResultRequest } from "@/app/api/jo/actions";
import type { BomCombo } from "@/app/api/bom";
import type { PrinterCombo } from "@/app/api/settings/printer";
import type { JobTypeResponse } from "@/app/api/jo/actions";

export type JoWorkbenchTabsProps = {
  defaultSearchInputs: SearchJoResultRequest;
  bomCombo: BomCombo[];
  printerCombo: PrinterCombo[];
  jobTypes: JobTypeResponse[];
  defaultTabIndex?: number;
};

function TabPanel(props: { value: number; index: number; children: React.ReactNode }) {
  const { value, index, children } = props;
  if (value !== index) return null;
  return <Box sx={{ pt: 2 }}>{children}</Box>;
}

const JoWorkbenchTabs: React.FC<JoWorkbenchTabsProps> = ({
  defaultSearchInputs,
  bomCombo,
  printerCombo,
  jobTypes,
  defaultTabIndex = 0,
}) => {
  const { t } = useTranslation("jo");
  const [tab, setTab] = React.useState<number>(defaultTabIndex);

  return (
    <Box>
      <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tab label={t("Workbench search", { defaultValue: "Search / Release" })} value={0} />
        <Tab label={t("Workbench pick list", { defaultValue: "Pick order list" })} value={1} />
      </Tabs>

      <TabPanel value={tab} index={0}>
        <JoWorkbenchSearch
          defaultInputs={defaultSearchInputs}
          bomCombo={bomCombo}
          printerCombo={printerCombo}
          jobTypes={jobTypes}
        />
      </TabPanel>

      <TabPanel value={tab} index={1}>
        <JoPickOrderList printerCombo={printerCombo} />
      </TabPanel>
    </Box>
  );
};

export default JoWorkbenchTabs;
