import React, { useState } from "react"
import type { ComponentType } from "react"
import { Eye, EyeSlash } from "phosphor-react"

const brandColor = "#6D24FF"

export function withPasswordProtection(Component): ComponentType {
    return (props) => {
        const PASSWORDS = ["password", "password2"]
        const [authenticated, setAuthenticated] = useState(false)
        const [showPassword, setShowPassword] = useState(false)

        const handlePasswordSubmit = (e) => {
            e.preventDefault()
            const inputPassword = e.target.elements.password.value
            if (PASSWORDS.includes(inputPassword)) {
                setAuthenticated(true)
            } else {
                alert("Incorrect password")
            }
        }

        if (!authenticated) {
            return (
                <div
                    style={{
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        height: "100vh",
                        flexDirection: "column",
                    }}
                >
                    <form
                        onSubmit={handlePasswordSubmit}
                        style={{
                            display: "flex",
                            flexDirection: "column",
                            width: "250px",
                            gap: "10px",
                            position: "relative",
                        }}
                    >
                        <label style={{ fontSize: "16px" }}>Password:</label>
                        <div
                            style={{
                                position: "relative",
                                display: "flex",
                                alignItems: "center",
                            }}
                        >
                            <input
                                type={showPassword ? "text" : "password"}
                                name="password"
                                style={{
                                    padding: "12px",
                                    fontSize: "16px",
                                    borderRadius: "4px",
                                    border: "1px solid #ccc",
                                    width: "100%",
                                }}
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                style={{
                                    position: "absolute",
                                    right: "10px",
                                    background: "none",
                                    border: "none",
                                    cursor: "pointer",
                                }}
                            >
                                {showPassword ? (
                                    <EyeSlash
                                        size={20}
                                        color="#6D24FF"
                                        weight="bold"
                                    />
                                ) : (
                                    <Eye
                                        size={20}
                                        color="#6D24FF"
                                        weight="bold"
                                    />
                                )}
                            </button>
                        </div>
                        <button
                            type="submit"
                            style={{
                                padding: "8px",
                                fontSize: "16px",
                                fontFamily: "Onest",
                                borderRadius: "4px",
                                border: "none",
                                backgroundColor: brandColor,
                                color: "white",
                                cursor: "pointer",
                            }}
                        >
                            Submit
                        </button>
                    </form>
                </div>
            )
        }

        return <Component {...props} />
    }
}