FPSMS-frontend/src/components/MailSetting/SettingDetails.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 from "react";
import MailField from "../MailField/MailField";
import { MailSetting } from "@/app/api/mail";
import { MailSave } from "@/app/api/mail/actions";
import { Checkbox, IconButton, InputAdornment } from "@mui/material";
import { Visibility, VisibilityOff } from "@mui/icons-material";

interface Props {
  isActive: boolean;
}

const SettingDetails: React.FC<Props> = ({ isActive }) => {
  const requiredFields = ["host", "port", "username"];
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
    control,
    watch,
  } = useFormContext<MailSave>();

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

  const [showSMTPPassword, setShowSMTPPassword] = React.useState(false);

  const handleClickShowPassword = () => setShowSMTPPassword((show) => !show);

  const handleMouseDownPassword = (
    event: React.MouseEvent<HTMLButtonElement>,
  ) => {
    event.preventDefault();
  };

  return (
    <Card sx={{ display: isActive ? "block" : "none" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Settings")}
          </Typography>
          {fields.map((field, index) => (
            <Grid
              container
              key={"row-" + index}
              justifyContent="flex-start"
              alignItems="center"
              spacing={2}
              columns={{ xs: 6, sm: 12 }}
              sx={{ mt: 1 }}
            >
              <Grid item key={"col-1-" + index} xs={4}>
                <Typography variant="body2">{`${t(field.name)}${
                  requiredFields.some((name) =>
                    field.name.toLowerCase().includes(name),
                  )
                    ? "*"
                    : ""
                }`}</Typography>
              </Grid>
              {field.name.toLowerCase().includes("password") === true ? (
                <Grid item key={"col-2-" + index} xs={8}>
                  <TextField
                    label={t(field.name)}
                    type={showSMTPPassword ? "text" : "password"}
                    InputProps={{
                      endAdornment: (
                        <InputAdornment position="end">
                          <IconButton
                            aria-label="toggle password visibility"
                            onClick={handleClickShowPassword}
                            onMouseDown={handleMouseDownPassword}
                          >
                            {showSMTPPassword ? (
                              <Visibility />
                            ) : (
                              <VisibilityOff />
                            )}
                          </IconButton>
                        </InputAdornment>
                      ),
                    }}
                    fullWidth
                    {...register(`settings.${index}.value`)}
                  />
                </Grid>
              ) : field.type.toLowerCase() === "boolean" ? (
                <Grid item xs={8}>
                  <Checkbox
                    {...register(`settings.${index}.value`)}
                    checked={Boolean(watch(`settings.${index}.value`))}
                  />
                </Grid>
              ) : field.type.toLowerCase() === "integer" ? (
                <Grid item xs={8}>
                  <TextField
                    label={t(field.name)}
                    type="number"
                    InputProps={{
                      inputProps: {
                        step: 1,
                        min: 0,
                      },
                    }}
                    fullWidth
                    {...register(`settings.${index}.value`, {
                      required: requiredFields.some((name) =>
                        field.name.toLowerCase().includes(name),
                      ),
                    })}
                    error={Boolean(
                      errors.settings &&
                        errors.settings.length &&
                        errors.settings.length > index &&
                        errors.settings[index]?.value,
                    )}
                  />
                </Grid>
              ) : (
                <Grid item xs={8}>
                  <TextField
                    label={t(field.name)}
                    fullWidth
                    {...register(`settings.${index}.value`, {
                      required: requiredFields.some((name) =>
                        field.name.toLowerCase().includes(name),
                      ),
                    })}
                    error={Boolean(
                      errors.settings &&
                        errors.settings.length &&
                        errors.settings.length > index &&
                        errors.settings[index]?.value,
                    )}
                  />
                </Grid>
              )}
            </Grid>
          ))}
        </Box>
      </CardContent>
    </Card>
  );
};

export default SettingDetails;