"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 { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useCallback, useState } from "react";
import { PasswordInputs } from "@/app/api/user/actions";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import { IconButton, InputAdornment } from "@mui/material";

const ChagnePasswordForm: React.FC = () => {
  const { t } = useTranslation("changePassword");
  
  const [showNewPassword, setShowNewPassword] = useState(false);
  const handleClickShowNewPassword = () => setShowNewPassword(!showNewPassword);
  const handleMouseDownNewPassword = () => setShowNewPassword(!showNewPassword);

  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => setShowPassword(!showPassword);
  const handleMouseDownPassword = () => setShowPassword(!showPassword);

  const {
    register,
    formState: { errors, defaultValues },
    control,
    reset,
    resetField,
    setValue,
  } = useFormContext<PasswordInputs>();

  return (
    <Card sx={{ display: "block" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Please Fill in All Fields")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Input Old Password")}
                fullWidth
                type={showPassword ? "text" : "password"}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        aria-label="toggle password visibility"
                        onClick={handleClickShowPassword}
                        onMouseDown={handleMouseDownPassword}
                      >
                        {showPassword ? <Visibility /> : <VisibilityOff />}
                      </IconButton>
                    </InputAdornment>
                  )
                }}
                {...register("password", {
                  required: true,
                })}
                error={Boolean(errors.password)}
                helperText={
                  Boolean(errors.password) &&
                  (errors.password?.message
                    ? t(errors.password.message)
                    : t("Please input correct password"))
                }
              />
            </Grid>
            <Grid item xs={6} />
            <Grid item xs={6}>
              <TextField
                label={t("Input New Password")}
                fullWidth
                type={showNewPassword ? "text" : "password"}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        aria-label="toggle password visibility"
                        onClick={handleClickShowNewPassword}
                        onMouseDown={handleMouseDownNewPassword}
                      >
                        {showNewPassword ? <Visibility /> : <VisibilityOff />}
                      </IconButton>
                    </InputAdornment>
                  )
                }}
                {...register("newPassword")}
                error={Boolean(errors.newPassword)}
                helperText={
                  Boolean(errors.newPassword) &&
                  (errors.newPassword?.message
                    ? t(errors.newPassword.message)
                    : t("Please input correct newPassword"))
                }
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Input New Password Again")}
                fullWidth
                type={showNewPassword ? "text" : "password"}
                InputProps={{ 
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        aria-label="toggle password visibility"
                        onClick={handleClickShowNewPassword}
                        onMouseDown={handleMouseDownNewPassword}
                      >
                        {showNewPassword ? <Visibility /> : <VisibilityOff />}
                      </IconButton>
                    </InputAdornment>
                  )
                }}
                {...register("newPasswordCheck")}
                error={Boolean(errors.newPassword)}
                helperText={
                  Boolean(errors.newPassword) &&
                  (errors.newPassword?.message
                    ? t(errors.newPassword.message)
                    : t("Please input correct newPassword"))
                }
              />
            </Grid>
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};
export default ChagnePasswordForm;
