import React, { useState } from "react";
import { EyeIcon } from "../icons/ExportCommonIcons";

interface Props {
  newPassword: string;
  confirmPassword: string;
  setNewPassword: (value: string) => void;
  setConfirmPassword: (value: string) => void;
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

const PasswordSetup: React.FC<Props> = ({
  newPassword,
  confirmPassword,
  setNewPassword,
  setConfirmPassword,
  onSubmit,
}) => {
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  return (
    <div className="request-container">
      <h1 className="header">New Password</h1>
      <p className="sub-header">
        Set the new password for your account so you can login and access all
        features.
      </p>
      <form
        className="auth-form"
        onSubmit={(e) => {
          e.preventDefault();
          if (newPassword !== confirmPassword) {
            alert("Passwords do not match");
            return;
          }
          onSubmit(e);
        }}
      >
        <div className="password-container">
          <input
            type={showNewPassword ? "text" : "password"}
            placeholder="Enter new password"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            required
          />
          <button
            type="button"
            className="toggle-password"
            onClick={() => setShowNewPassword((prev) => !prev)}
          >
            <EyeIcon isClosed={!showNewPassword} />
          </button>
        </div>

        <div className="password-container">
          <input
            type={showConfirmPassword ? "text" : "password"}
            placeholder="Confirm password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            required
          />
          <button
            type="button"
            className="toggle-password"
            onClick={() => setShowConfirmPassword((prev) => !prev)}
          >
            <EyeIcon isClosed={!showConfirmPassword} />
          </button>
        </div>

        <button type="submit" className="continue-button">
          Update password
        </button>
      </form>
    </div>
  );
};

export default PasswordSetup;
