"use client";

import { FileUpload } from "@mui/icons-material";
import { Button, Grid, Stack } from "@mui/material";
import React, { ChangeEvent, useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { errorDialogWithContent, submitDialog, successDialog, successDialogWithContent } from "../Swal/CustomAlerts";
import { importStockTake } from "@/app/api/stockTake/actions";

interface Props {
}

const ExcelFileImport: React.FC<Props> = async ({ }) => {

    const { t } = useTranslation("common");

    const buttonName: string[] = useMemo(() => {
        return ["Import Stock Take"]
    }, [])

    const handleExcelFileImportClick = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {

        try {
            if (event.target.files !== null) {
                const file = event.target.files[0]
                const formData = new FormData();
                formData.append('multipartFileList', file);

                if (file.name.endsWith(".xlsx") || file.name.endsWith(".csv")) {
                    let response: String = ""

                    console.log(event.target.id)
                    switch (event.target.id) {
                        case "Import Stock Take":
                            response = await importStockTake(formData)
                            break;
                    }

                    if (response.includes("Import Excel success")) {
                        successDialogWithContent(t("Import Success"), t(`${response}`), t)
                    } else {
                        errorDialogWithContent(t("Import Fail"), t(`${response}`), t)
                    }
                }
            }

        } catch (err) {
            console.log(err)
            return false
        }

        return
    }, [])

    return (
        <>
            <Grid container rowGap={1.5}>
                {
                    buttonName.map((name) => {
                        return (
                            <Grid container>
                                <Button
                                    variant="contained"
                                    color="info"
                                    startIcon={<FileUpload />}
                                    component="label"
                                >
                                    <input
                                        id={name}
                                        type='file'
                                        accept='.xlsx'
                                        hidden
                                        onChange={(event) => {
                                            handleExcelFileImportClick(event)
                                        }}
                                    />
                                    {t(name)}
                                </Button>
                            </Grid>
                        )
                    })
                }
            </Grid>
        </>
    );
};

export default ExcelFileImport;