"use client";

import React, { FC, Dispatch, SetStateAction, useState } from "react";
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>>;
  packageId: number;
  formCode: string;
  formId: number;
  uploaderType: string;
}

export const FormDataReportTempUploadDialog: FC<
  FormDataReportTempUploadDialogProps
> = ({
  columnsJSON,
  open,
  setOpen,
  packageId,
  formId,
  formCode,
  uploaderType,
}) => {
    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>Vendor Document Template</DialogTitle>
            <DialogDescription className="flex justify-around gap-[16px] ">
              {/* 사용하시고자 하는 Vendor Document Template(.docx)를 업로드
            하여주시기 바랍니다. */}
              <FileActionsDropdown
                filePath={"/vendorFormReportSample"}
                fileName={"sample_template_file.docx"}
                variant="ghost"
                size="icon"
                description="Sample File"
              />
              <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"
                >
                  Upload Template File
                </TabsTrigger>
                <TabsTrigger
                  value="uploaded"
                  onClick={() => setTabValue("uploaded")}
                  className="flex-1"
                >
                  Uploaded Template File List
                </TabsTrigger>
              </TabsList>
            </div>
            <TabsContent value="upload">
              <FormDataReportTempUploadTab
                packageId={packageId}
                formId={formId}
                uploaderType={uploaderType}
              />
            </TabsContent>
            <TabsContent value="uploaded">
              <FormDataReportTempUploadedListTab
                packageId={packageId}
                formId={formId}
              />
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>
    );
  };