"use state";

/* eslint-disable react-hooks/exhaustive-deps */
import { useState, useEffect, FormEvent } from "react";
import { MdCheckCircle } from "react-icons/md";
import { FaLayerGroup } from "react-icons/fa";
import { Input } from "@/components/ui/input";
import { Eye, EyeOff } from "lucide-react";


import styles from "../steps.module.scss";

interface SignUpData {
  username: string;
  phone: string;
  gender: string;
  preferredAsset: string;
  experience: string;
  password: string;
  password_confirmation: string;
}

interface SecurityInfoProps {
  handlePrevClick: () => void;
  handleSubmit: (e: FormEvent) => void;
  value: SignUpData;
  setData: (
    key: keyof SignUpData,
    value: string
  ) => void;
  processing?: boolean;
}

const SecurityInfo = ({
  handlePrevClick,
  handleSubmit,
  value,
  setData,
  processing = false,
}: SecurityInfoProps) => {
  const {
    experience,
    password,
    password_confirmation,
  } = value;

  const [experienceLevel, setExperienceLevel] =
    useState<string>("beginner");

  const toggleExperience = (
    key: string
  ) => {
    setExperienceLevel(key);

    setData(
      "experience",
      key
    );
  };

  const [showPassword, setShowPassword] =
  useState(false);

  const [
    showConfirmPassword,
    setShowConfirmPassword,
  ] = useState(false);

  useEffect(() => {
    setExperienceLevel(
      experience || "beginner"
    );

    setData(
      "experience",
      experience || "beginner"
    );
  }, []);

  return (
    <div className={styles.steps}>
      <h2>
         Experience & Security
      </h2>

      <p>
        Tell us your experience
        level and secure your
        account.
      </p>

      <div
        className={
          styles["steps--options"]
        }
      >
        <label>
          Experience Level *
        </label>

        {/* Beginner */}

        <div
          onClick={() =>
            toggleExperience(
              "beginner"
            )
          }
          className={
            experienceLevel ===
            "beginner"
              ? styles[
                  "steps--options--item--active"
                ]
              : styles[
                  "steps--options--item"
                ]
          }
        >
          <span>
            <FaLayerGroup
              fill="#F79318"
              size="1rem"
            />
          </span>

          <div>
            <h2>
              Beginner
            </h2>

            <p>
              New to trading
              and investing.
            </p>
          </div>

          {experienceLevel ===
            "beginner" && (
            <MdCheckCircle
              style={{
                position:
                  "absolute",
                right: "1rem",
              }}
              fill="#F79318"
              size="1.5rem"
            />
          )}
        </div>

        {/* Intermediate */}

        <div
          onClick={() =>
            toggleExperience(
              "intermediate"
            )
          }
          className={
            experienceLevel ===
            "intermediate"
              ? styles[
                  "steps--options--item--active"
                ]
              : styles[
                  "steps--options--item"
                ]
          }
        >
          <span>
            <FaLayerGroup
              fill="#F79318"
              size="1rem"
            />
          </span>

          <div>
            <h2>
              Intermediate
            </h2>

            <p>
              Familiar with
              markets and
              trading concepts.
            </p>
          </div>

          {experienceLevel ===
            "intermediate" && (
            <MdCheckCircle
              style={{
                position:
                  "absolute",
                right: "1rem",
              }}
              fill="#F79318"
              size="1.5rem"
            />
          )}
        </div>

        {/* Advanced */}

        <div
          onClick={() =>
            toggleExperience(
              "advanced"
            )
          }
          className={
            experienceLevel ===
            "advanced"
              ? styles[
                  "steps--options--item--active"
                ]
              : styles[
                  "steps--options--item"
                ]
          }
        >
          <span>
            <FaLayerGroup
              fill="#F79318"
              size="1rem"
            />
          </span>

          <div>
            <h2>
              Advanced
            </h2>

            <p>
              Experienced trader
              with deep market
              knowledge.
            </p>
          </div>

          {experienceLevel ===
            "advanced" && (
            <MdCheckCircle
              style={{
                position:
                  "absolute",
                right: "1rem",
              }}
              fill="#F79318"
              size="1.5rem"
            />
          )}
        </div>
      </div><br /><br />
      
     <div
      className={
        styles.steps__row
      }
    >
      <div
        className={
          styles.steps__row__password
        }
      >
        <label>
          Password *
        </label>

        <Input
          type={
            showPassword
              ? "text"
              : "password"
          }
          value={password}
          placeholder="Enter password"
          onChange={(e) =>
            setData(
              "password",
              e.target.value
            )
          }
        />

        <button
          type="button"
          onClick={() =>
            setShowPassword(
              !showPassword
            )
          }
          className={
            styles.passwordToggle
          }
        >
          {showPassword ? (
            <EyeOff size={18} />
          ) : (
            <Eye size={18} />
          )}
        </button>
      </div>

      <div
        className={
          styles.steps__row__password
        }
      >
        <label>
          Confirm Password *
        </label>

        <Input
          type={
            showConfirmPassword
              ? "text"
              : "password"
          }
          value={
            password_confirmation
          }
          placeholder="Confirm password"
          onChange={(e) =>
            setData(
              "password_confirmation",
              e.target.value
            )
          }
        />

        <button
          type="button"
          onClick={() =>
            setShowConfirmPassword(
              !showConfirmPassword
            )
          }
          className={
            styles.passwordToggle
          }
        >
          {showConfirmPassword ? (
            <EyeOff size={18} />
          ) : (
            <Eye size={18} />
          )}
        </button>
      </div>
    </div>

      <div
        className={
          styles.steps__buttons
        }
      >
        <div
          onClick={
            handlePrevClick
          }
          className={
            styles[
              "steps__buttons__button--prev"
            ]
          }
        >
          Previous Step
        </div>
      </div><br /><br />

      <small>
        By completing your
        registration, you agree
        to the TraderPlus Terms
        and Conditions.
      </small>

      <button
        type="submit"
        onClick={handleSubmit}
        disabled={processing}
        className={
          styles.steps__submit
        }
      >
        {processing
          ? "Creating Account..."
          : "Complete Registration"}
      </button>
    </div>
  );
};

export default SecurityInfo;