FPSMS-frontend/src/components/MailSetting/TemplateDetails.tsx

"use client";

import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import { Controller, useFieldArray, useFormContext } from "react-hook-form";
import Link from "next/link";
import React, { SyntheticEvent, useCallback, useMemo, useState } from "react";
import MailField from "../MailField/MailField";
import { MailSave } from "@/app/api/mail/actions";
import { MailTemplate } from "@/app/api/mail";
import { isEmpty, keys } from "lodash";
import { Autocomplete, ListSubheader, MenuItem, UseAutocompleteProps } from "@mui/material";

interface Props {
    isActive: boolean;
}

interface OptionType {
    value: number,
    label: string,
    group: string,
}

type fieldKeys = keyof MailTemplate

const TemplateDetails: React.FC<Props> = ({ isActive }) => {
    const { t } = useTranslation();

    // const disabledFields: fieldKeys[] = []
    // const requiredFields: fieldKeys[] = []
    // const skipFields: fieldKeys[] = ["code", "subjectEng", "contentEng"]
    const [selectedIndex, setSelectedIndex] = useState(0)

    const {
        register,
        formState: { errors },
        control,
        watch,
        getValues
    } = useFormContext<MailSave>();

    const {
        fields,
    } = useFieldArray({
        control,
        name: "templates"
    })

    const options: OptionType[] = useMemo(() => (
        fields.map((field, index) => {
            return {
                value: index,
                label: `${field.code} - ${field.description}`,
                group: field.type
            } as OptionType
        })
    ), [fields])

    const makeAutocompleteChangeHandler = useCallback(() => {
        return (e: SyntheticEvent, newValue: OptionType) => {
            setSelectedIndex(() => newValue.value);
        };
    }, []);

    // const renderFieldsBySwitchCases = useCallback(() => {
    //     const fieldNames = keys(fields[0]) as fieldKeys[];

    //     return fieldNames
    //         .filter((name) => !skipFields.includes(name))
    //         .map((name: fieldKeys, index: number) => {
    //             switch (name) {
    //                 case "contentCht":
    //                     return (
    //                         <Grid item xs={12}>
    //                             <Controller
    //                                 control={control}
    //                                 name={`templates.${selectedIndex}.contentCht`}
    //                                 render={({ field }) => (
    //                                     <MailField
    //                                         content={field.value}
    //                                         onChange={field.onChange}
    //                                         error={Boolean(errors.templates?.[selectedIndex]?.contentCht)}
    //                                     />
    //                                 )}
    //                                 rules={{
    //                                     required: requiredFields.includes(name),
    //                                 }}
    //                             />
    //                         </Grid>
    //                     )
    //                 default:
    //                     return (
    //                         <Grid item xs={8}>
    //                             <TextField
    //                                 label={t(name)}
    //                                 fullWidth
    //                                 {...register(`templates.${selectedIndex}.cc`),
    //                                 {
    //                                     required: requiredFields.includes(name)
    //                                 }}
    //                             />
    //                         </Grid>
    //                     )
    //             }
    //         })
    // }, [fields])

    return (
        <Card sx={{ display: isActive ? "block" : "none" }}>
            <CardContent component={Stack} spacing={4}>
                <Box>
                    <Typography variant="overline" display="block" marginBlockEnd={1}>
                        {t("Template")}
                    </Typography>
                    <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                        <Grid item xs={8}>
                            <Autocomplete
                                disableClearable
                                options={options}
                                value={options[selectedIndex]}
                                onChange={makeAutocompleteChangeHandler}
                                groupBy={(option) => (
                                    option.group && option.group.trim() !== '' ? option.group : 'Ungrouped'
                                )}
                                renderGroup={(params) => (
                                    <React.Fragment>
                                        <ListSubheader>{params.group}</ListSubheader>
                                        {params.children}
                                    </React.Fragment>
                                )}
                                renderOption={(
                                    params: React.HTMLAttributes<HTMLLIElement> & { key?: React.Key },
                                    option,
                                    { selected },
                                ) => {
                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                    const { key, ...rest } = params;
                                    return (
                                        <MenuItem
                                            {...rest}
                                            disableRipple
                                            value={option.value}
                                        >
                                            {option.label}
                                        </MenuItem>
                                    );
                                }}
                                renderInput={(params) => <TextField {...params} variant="outlined" label={t("Select Template (View By Code - Description)")} />}
                            />
                        </Grid>
                        <Grid item xs={8}>
                            <TextField
                                label={t("Code")}
                                fullWidth
                                {...register(`templates.${selectedIndex}.code`, {
                                    required: "Code is required!"
                                })}
                                required
                                error={Boolean(errors.templates?.[selectedIndex]?.code)}
                            />
                        </Grid>
                        <Grid item xs={8}>
                            <TextField
                                label={t("Description")}
                                fullWidth
                                {...register(`templates.${selectedIndex}.description`, {
                                    required: "Description is required!"
                                })}
                                required
                                error={Boolean(errors.templates?.[selectedIndex]?.description)}
                            />
                        </Grid>
                        {/* <Grid item xs={8}>
                            <TextField
                                label={t("To")}
                                fullWidth
                                {...register(`templates.${selectedIndex}.to`, {
                                    required: "To is required!"
                                })}
                                required
                                error={Boolean(errors.templates?.[selectedIndex]?.to)}
                            />
                        </Grid>
                        <Grid item xs={8}>
                            <TextField
                                label={t("Cc")}
                                fullWidth
                                {...register(`templates.${selectedIndex}.cc`)}
                            />
                        </Grid>
                        <Grid item xs={8}>
                            <TextField
                                label={t("Required Params (split by ',')")}
                                fullWidth
                                {...register(`templates.${selectedIndex}.params`)}
                            />
                        </Grid> */}
                        <Grid item xs={8}>
                            <TextField
                                label={t("Subject CHT")}
                                fullWidth
                                {...register(`templates.${selectedIndex}.subjectCht`,
                                    {
                                        required: "Mail Subject is required!",
                                    })}
                                required
                                error={Boolean(errors.templates?.[selectedIndex]?.subjectCht)}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <Controller
                                control={control}
                                name={`templates.${selectedIndex}.contentCht`}
                                render={({ field }) => (
                                    <MailField
                                        content={field.value}
                                        onChange={field.onChange}
                                        error={Boolean(errors.templates?.[selectedIndex]?.contentCht)}
                                    />
                                )}
                                rules={{
                                    required: "Mail Content is required!",
                                }}
                            />
                        </Grid>
                    </Grid>
                </Box>
            </CardContent>
        </Card>
    );
};

export default TemplateDetails;