"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, useFormContext } from "react-hook-form";
import Link from "next/link";
import React from "react";
import MailField from "../MailField/MailField";
import { MailSave } from "@/app/api/mail/actions";

interface Props {
  isActive: boolean;
}

const TimesheetMailDetails: React.FC<Props> = ({ isActive }) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
    control,
  } = useFormContext<MailSave>();

  return (
    <Card sx={{ display: isActive ? "block" : "none" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Timesheet Template")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            {/* <Grid item xs={8}>
              <TextField
                label={t("Cc")}
                fullWidth
                {...register("template.cc")}
              />
            </Grid>
            <Grid item xs={8}>
              <TextField
                label={t("Bcc")}
                fullWidth
                {...register("template.bcc")}
              />
            </Grid>
            <Grid item xs={8}>
              <TextField
                label={t("Subject")}
                fullWidth
                {...register("template.subject", {
                  required: "Subject required!",
                })}
                error={Boolean(errors.template?.subject)}
              />
            </Grid> */}
            <Grid item xs={8}>
              <TextField
                label={t("Required Params")}
                fullWidth
                value={"${date}"}
                // disabled
                // error={Boolean(errors.template?.template)}
              />
            </Grid>
            {/* <Grid item xs={12}>
              <Controller
                control={control}
                name="template.template"
                render={({ field }) => (
                  <MailField
                    content={field.value}
                    onChange={field.onChange}
                    error={Boolean(errors.template?.template)}
                  />
                )}
                rules={{
                  required: true,
                  validate: (value) => value?.includes("${date}"),
                }}
              />
            </Grid> */}
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};

export default TimesheetMailDetails;