"use client";

import { UserResult } from "@/app/api/user";
import { UserInputs } from "@/app/api/user/actions";
import {
  Card,
  CardContent,
  Grid,
  Stack,
  TextField,
  Typography,
  makeStyles,
} from "@mui/material";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";

const UserDetail: React.FC = () => {
  const { t } = useTranslation("user");
  const {
    register,
    formState: { errors },
    control,
    watch,
  } = useFormContext<UserInputs>();

  const password = watch("password");
  const username = watch("username");
  const staffNo = watch("staffNo");
  const name = watch("name");

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Typography variant="overline" display="block" marginBlockEnd={1}>
          {t("User Detail")}
        </Typography>
        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
          <Grid item xs={6}>
            <TextField
              label={t("username")}
              fullWidth
              variant="filled"
              InputLabelProps={{
                shrink: !!username,
                sx: { fontSize: "0.9375rem" },
              }}
              InputProps={{
                sx: { paddingTop: "8px" },
              }}
              {...register("username", {
                required: "username required!",
              })}
              error={Boolean(errors.username)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("staffNo")}
              fullWidth
              variant="filled"
              InputLabelProps={{
                shrink: !!staffNo,
                sx: { fontSize: "0.9375rem" },
              }}
              InputProps={{
                sx: { paddingTop: "8px" },
              }}
              {...register("staffNo")}
              error={Boolean(errors.staffNo)}
              helperText={
                Boolean(errors.staffNo) && errors.staffNo?.message
                  ? t(errors.staffNo.message)
                  : ""
              }
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("name")}
              fullWidth
              variant="filled"
              InputLabelProps={{
                shrink: !!name,
                sx: { fontSize: "0.9375rem" },
              }}
              InputProps={{
                sx: { paddingTop: "8px" },
              }}
              {...register("name", {
                required: "name required!",
              })}
              error={Boolean(errors.name)}
              helperText={
                Boolean(errors.name) && errors.name?.message
                  ? t(errors.name.message)
                  : ""
              }
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("password")}
              fullWidth
              type="password"
              variant="filled"
              InputLabelProps={{
                shrink: !!password,
                sx: { fontSize: "0.9375rem" },
              }}
              InputProps={{
                sx: { paddingTop: "8px" },
              }}
              {...register("password")}
              helperText={
                Boolean(errors.password) &&
                (errors.password?.message
                  ? t(errors.password.message)
                  : t("Please input correct password"))
              }
              error={Boolean(errors.password)}
            />
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default UserDetail;