"use client";

import React, { FC, Dispatch, SetStateAction, useState } from "react";
import { useParams } from "next/navigation";
import { useTranslation } from "@/i18n/client";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { VarListDownloadBtn } from "./var-list-download-btn";
import { FormDataReportTempUploadTab } from "./form-data-report-temp-upload-tab";
import { FormDataReportTempUploadedListTab } from "./form-data-report-temp-uploaded-list-tab";
import { DataTableColumnJSON } from "./form-data-table-columns";
import { FileActionsDropdown } from "../ui/file-actions";

interface FormDataReportTempUploadDialogProps {
  columnsJSON: DataTableColumnJSON[];
  open: boolean;
  setOpen: Dispatch<SetStateAction<boolean>>;
  projectCode: string;
  packageCode: string;
  formCode: string;
  formId: number;
  uploaderType: string;
}

export const FormDataReportTempUploadDialog: FC<
  FormDataReportTempUploadDialogProps
> = ({
  columnsJSON,
  open,
  setOpen,
  projectCode,
  packageCode,
  formId,
  formCode,
  uploaderType,
}) => {
  const params = useParams();
  const lng = (params?.lng as string) || "ko";
  const { t } = useTranslation(lng, "engineering");

  const [tabValue, setTabValue] = useState<"upload" | "uploaded">("upload");

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="w-[600px]" style={{ maxWidth: "none" }}>
        <DialogHeader className="gap-2">
          <DialogTitle>{t("templateUpload.dialogTitle")}</DialogTitle>
          <DialogDescription className="flex justify-around gap-[16px] ">
            <FileActionsDropdown
              filePath={"/vendorFormReportSample/sample_template_file.docx"}
              fileName={"sample_template_file.docx"}
              variant="ghost"
              size="icon"
              description={t("templateUpload.sampleFile")}
            />
            <VarListDownloadBtn columnsJSON={columnsJSON} formCode={formCode} />
          </DialogDescription>
        </DialogHeader>
        <Tabs value={tabValue}>
          <div className="flex justify-between items-center">
            <TabsList className="w-full">
              <TabsTrigger
                value="upload"
                onClick={() => setTabValue("upload")}
                className="flex-1"
              >
                {t("templateUpload.uploadTab")}
              </TabsTrigger>
              <TabsTrigger
                value="uploaded"
                onClick={() => setTabValue("uploaded")}
                className="flex-1"
              >
                {t("templateUpload.uploadedListTab")}
              </TabsTrigger>
            </TabsList>
          </div>
          <TabsContent value="upload">
            <FormDataReportTempUploadTab
              projectCode={projectCode}
              packageCode={packageCode}
              formId={formId}
              uploaderType={uploaderType}
            />
          </TabsContent>
          <TabsContent value="uploaded">
            <FormDataReportTempUploadedListTab
              projectCode={projectCode}
              packageCode={packageCode}
              formId={formId}
            />
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
};