"use client";

import React, { FC, Dispatch, SetStateAction, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { TempDownloadBtn } from "./temp-download-btn";
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";

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>
          <DialogTitle>Vendor Document Template</DialogTitle>
          <DialogDescription>
            {/* 사용하시고자 하는 Vendor Document Template(.docx)를 업로드
            하여주시기 바랍니다. */}
          </DialogDescription>
        </DialogHeader>
        <Tabs value={tabValue}>
          <div className="flex justify-between items-center">
            <TabsList>
              <TabsTrigger value="upload" onClick={() => setTabValue("upload")}>
                Upload Template File
              </TabsTrigger>
              <TabsTrigger
                value="uploaded"
                onClick={() => setTabValue("uploaded")}
              >
                Uploaded Template File List
              </TabsTrigger>
            </TabsList>
            <div className="flex flex-row gap-2">
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <div>
                      <TempDownloadBtn />
                    </div>
                  </TooltipTrigger>
                  <TooltipContent>
                    <Label>Template Sample File Download</Label>
                  </TooltipContent>
                </Tooltip>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <div>
                      <VarListDownloadBtn
                        columnsJSON={columnsJSON}
                        formCode={formCode}
                      />
                    </div>
                  </TooltipTrigger>
                  <TooltipContent>
                    <Label>Variable List File Download</Label>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
          <TabsContent value="upload">
            <FormDataReportTempUploadTab
              packageId={packageId}
              formId={formId}
              uploaderType={uploaderType}
            />
          </TabsContent>
          <TabsContent value="uploaded">
            <FormDataReportTempUploadedListTab
              packageId={packageId}
              formId={formId}
            />
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
};