"use client";

import { importProjects } from "@/app/api/projects/actions";
import { FileUpload } from "@mui/icons-material";
import { Button, Grid, Stack } from "@mui/material";
import React, { ChangeEvent, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { errorDialogWithContent, submitDialog, successDialog, successDialogWithContent } from "../Swal/CustomAlerts";
import { importLeaves, importOSTimesheets, importTimesheets, rearrangeTimesheets } from "@/app/api/timesheets/actions";

interface Props {
}

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

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

    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 "importProject":
                            response = await importProjects(formData)
                            break;
                        case "importTimesheet":
                            response = await importTimesheets(formData)
                            break;
                        case "importOSTimesheet":
                            response = await importOSTimesheets(formData)
                            break;
                        case "importLeave":
                            response = await importLeaves(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
    }, [])

    const handleButtonClick = useCallback(async (event: React.MouseEvent<HTMLElement>) => {
        try {

            const targetId = event.currentTarget.id
            submitDialog(async () => {
                let response: String = ""

                switch (targetId) {
                    case "rearrangeTimesheet":
                        response = await rearrangeTimesheets()
                        break;
                }

                if (response.includes("Rearrange success")) {
                    successDialogWithContent(t("Rearrange Success"), t(`${response}`), t)
                } else {
                    errorDialogWithContent(t("Rearrange Fail"), t(`${response}`), t)
                }
            }, t,
                {
                    title: "Do you want to rearrange?",
                    confirmButtonText: "Rearrange"
                })

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

    }, [])

    return (
        <>
            <Grid container rowGap={1.5}>
                <Grid container>
                    <Button
                        variant="contained"
                        color="info"
                        startIcon={<FileUpload />}
                        component="label"
                    >
                        <input
                            id='importProject'
                            type='file'
                            accept='.xlsx'
                            hidden
                            onChange={(event) => {
                                handleExcelFileImportClick(event)
                            }}
                        />
                        {t("Import Project")}
                    </Button>
                </Grid>
                <Grid container>
                    <Button
                        variant="contained"
                        color="info"
                        startIcon={<FileUpload />}
                        component="label"
                    >
                        <input
                            id='importTimesheet'
                            type='file'
                            accept='.xlsx'
                            hidden
                            onChange={(event) => {
                                handleExcelFileImportClick(event)
                            }}
                        />
                        {t("Import Timesheet")}
                    </Button>
                </Grid>
                <Grid container>
                    <Button
                        variant="contained"
                        color="info"
                        startIcon={<FileUpload />}
                        component="label"
                    >
                        <input
                            id='importOSTimesheet'
                            type='file'
                            accept='.xlsx'
                            hidden
                            onChange={(event) => {
                                handleExcelFileImportClick(event)
                            }}
                        />
                        {t("Import OS Timesheet")}
                    </Button>
                </Grid>
                <Grid container>
                    <Button
                        id="rearrangeTimesheet"
                        variant="contained"
                        color="error"
                        startIcon={<FileUpload />}
                        component="label"
                        onClick={handleButtonClick}
                    >
                        {t("Rearrange Timesheet")}
                    </Button>
                </Grid>
                <Grid container>
                    <Button
                        variant="contained"
                        color="info"
                        startIcon={<FileUpload />}
                        component="label"
                    >
                        <input
                            id='importLeave'
                            type='file'
                            accept='.xlsx'
                            hidden
                            onChange={(event) => {
                                handleExcelFileImportClick(event)
                            }}
                        />
                        {t("Import Leave")}
                    </Button>
                </Grid>
            </Grid>
        </>
    );
};

export default ExcelFileImport;