import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';import {Dialog,DialogContent,DialogHeader,DialogTitle,DialogDescription}from'@admin-layout/tailwind-ui/shardui/dialog.js';import {Button}from'@admin-layout/tailwind-ui/shardui/button.js';import {Input}from'@admin-layout/tailwind-ui/shardui/input.js';import {Label}from'@admin-layout/tailwind-ui/shardui/label.js';import {Checkbox}from'@admin-layout/tailwind-ui/shardui/checkbox.js';import {Collapsible,CollapsibleContent}from'@admin-layout/tailwind-ui/shardui/collapsible.js';import {FaArrowRight}from'@react-icons/all-files/fa/FaArrowRight.js';import {DividerWithText}from'./DividerWithText.js';import {SocialLogin}from'./SocialLoginForm.js';function validateEmail(email) {
  if (!email) return false;
  const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}
const LoginForm = ({
  initRef,
  fromUrl,
  isRegistering,
  modelTitle,
  isOpen,
  onClose
}) => {
  const [loginForm, setLoginForm] = React__default.useState({
    remember: false,
    isRegistering: isRegistering,
    email: '',
    password: '',
    confirmedPassword: ''
  });
  const [emailError, setEmailError] = React__default.useState(false);
  const [passwordError, setPasswordError] = React__default.useState(false);
  const [confirmPasswordError, setConfirmPasswordError] = React__default.useState(false);
  React__default.useEffect(() => {
    if (validateEmail(loginForm.email)) setEmailError(false);else setEmailError(true);
    if (loginForm.password === '') setPasswordError(true);else setPasswordError(false);
  }, [loginForm.email, loginForm.password]);
  React__default.useEffect(() => {
    if (loginForm.isRegistering && loginForm.confirmedPassword === loginForm.password) {
      setConfirmPasswordError(false);
    } else if (loginForm.isRegistering) {
      setConfirmPasswordError(true);
    }
  }, [loginForm.confirmedPassword, loginForm.isRegistering, loginForm.password]);
  const handleLogin = e => {
    e.preventDefault();
  };
  const handleRegister = e => {
    e.preventDefault();
  };
  const toggleMode = e => {
    e.preventDefault();
    setLoginForm(s => ({
      ...s,
      isRegistering: !s.isRegistering
    }));
  };
  const handleClose = () => {
    onClose();
    setLoginForm(s => ({
      ...s,
      isRegistering: !s.isRegistering
    }));
  };
  return jsx(Dialog, {
    open: isOpen,
    onOpenChange: open => !open && handleClose(),
    children: jsxs(DialogContent, {
      className: "sm:max-w-md",
      children: [jsxs(DialogHeader, {
        children: [jsx(DialogTitle, {
          children: modelTitle
        }), jsx(DialogDescription, {})]
      }), jsxs("form", {
        className: "flex flex-col gap-4",
        onSubmit: !loginForm.isRegistering ? handleLogin : handleRegister,
        children: [jsxs("div", {
          className: "space-y-2",
          children: [jsx(Label, {
            htmlFor: "email",
            children: "Email"
          }), jsx(Input, {
            id: "email",
            type: "email",
            placeholder: "Enter your email",
            value: loginForm.email,
            ref: initRef,
            className: emailError ? 'border-red-500' : '',
            onChange: e => setLoginForm(s => ({
              ...s,
              email: e.target.value
            }))
          }), emailError && jsx("p", {
            className: "text-sm text-red-500",
            children: "Email not correct"
          })]
        }), jsxs("div", {
          className: "space-y-2",
          children: [jsxs("div", {
            className: "flex items-center justify-between",
            children: [jsx(Label, {
              htmlFor: "password",
              children: "Password"
            }), jsx("a", {
              href: "#",
              className: "text-sm font-semibold text-blue-600 hover:underline",
              children: "Forgot Password?"
            })]
          }), jsx(Input, {
            id: "password",
            type: "password",
            placeholder: "Enter your password",
            value: loginForm.password,
            className: passwordError ? 'border-red-500' : '',
            onChange: e => setLoginForm(s => ({
              ...s,
              password: e.target.value
            }))
          })]
        }), jsx(Collapsible, {
          open: loginForm.isRegistering,
          children: jsx(CollapsibleContent, {
            children: jsxs("div", {
              className: "space-y-2",
              children: [jsx(Label, {
                htmlFor: "confirm-password",
                children: "Confirm Password"
              }), jsx(Input, {
                id: "confirm-password",
                type: "password",
                placeholder: "Confirm your password",
                value: loginForm.confirmedPassword,
                className: confirmPasswordError ? 'border-red-500' : '',
                onChange: e => setLoginForm(s => ({
                  ...s,
                  confirmedPassword: e.target.value
                }))
              }), confirmPasswordError && jsx("p", {
                className: "text-sm text-red-500",
                children: "Password does not match"
              })]
            })
          })
        }), jsxs("div", {
          className: "flex items-center space-x-2",
          children: [jsx(Checkbox, {
            id: "remember",
            checked: loginForm.remember,
            onCheckedChange: checked => setLoginForm(s => ({
              ...s,
              remember: checked === true
            }))
          }), jsx(Label, {
            htmlFor: "remember",
            className: "font-normal cursor-pointer",
            children: "Remember me"
          })]
        }), jsx(Button, {
          type: "submit",
          className: "w-[30%] self-center rounded-full my-3",
          onClick: !loginForm.isRegistering ? handleLogin : handleRegister,
          children: jsx(FaArrowRight, {
            className: "w-5 h-5"
          })
        }), jsx(Button, {
          type: "button",
          variant: "link",
          className: "self-center",
          onClick: toggleMode,
          children: !loginForm.isRegistering ? 'Register your account!' : 'Or login instead!'
        }), jsx(DividerWithText, {
          children: "or"
        }), jsx(SocialLogin, {})]
      })]
    })
  });
};export{LoginForm};//# sourceMappingURL=LoginForm.js.map
