"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();
  const {
    register,
    formState: { errors },
    control,
  } = useFormContext<UserInputs>();

  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
              {...register("username", {
                required: "username required!",
              })}
              error={Boolean(errors.username)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("password")}
              fullWidth
              {...register("password")}
              // helperText={
              //   Boolean(errors.password) && 
              //   (errors.password?.message
              //     ? t(errors.password.message)
              //     : 
              //     (<>
              //     - 8-20 characters
              //     <br/>
              //     - Uppercase letters
              //     <br/>
              //     - Lowercase letters
              //     <br/>
              //     - Numbers
              //     <br/>
              //     - Symbols 
              //     </>)
              //   )
              // }
              helperText={
                Boolean(errors.password) &&
                (errors.password?.message
                  ? t(errors.password.message)
                  : t("Please input correct password"))
              }
              error={Boolean(errors.password)}
            />
          </Grid>
          {/* <Grid item xs={6}>
            <TextField
              label={t("name")}
              fullWidth
              {...register("name", {
                required: "name required!",
              })}
              error={Boolean(errors.name)}
            />
          </Grid> */}
        </Grid>
      </CardContent>
    </Card>
  );
};

export default UserDetail;


{/* <>
              - 8-20 characters
              <br/>
              - Uppercase letters
              <br/>
              - Lowercase letters
              <br/>
              - Numbers
              <br/>
              - Symbols 
              </> */}