"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;
