/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React, { useEffect } from "react";
import classNames from "classnames";
/* -------------------------------------------------------------------------- */
/*                                    Hooks                                   */
/* -------------------------------------------------------------------------- */
import { useUserStore } from "../data/userSlice";
import { useEmailDataViewModel } from "../controller/emailDataViewModel";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Modal from "components/containers/modal/Modal";
import InputField from "components/controls/InputField";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/*                                  Component                                 */
/* -------------------------------------------------------------------------- */
type Props = {
  isShown: boolean;
  onClose: VoidFunction;
};

export default function EmailEditor({ isShown, onClose: extOnClose }: Props) {
  const { t } = useTranslation();
  const store = useUserStore();
  const {
    status,
    isValid,
    isSubmiting,
    email,
    onEmailChange,
    onSubmit,
    onBlur,
    reset,
  } = useEmailDataViewModel(store);

  const onClose = () => {
    reset();
    extOnClose();
  };

  useEffect(() => {
    if (status?.fullfilled === true) {
      extOnClose();
    }
  }, [status, extOnClose]);

  const onSubmitHandler = (e: React.SyntheticEvent) => {
    e.preventDefault();
    onSubmit();
  };

  return (
    <Modal isOpen={isShown} onClose={onClose} className="max-w-lg">
      <form onSubmit={onSubmitHandler}>
        <Modal.Header>{t("account.mail")}</Modal.Header>
        <InputField
          name="email"
          placeholder="Email"
          value={email}
          onChange={onEmailChange}
          onBlur={onBlur}
          autoComplete="off"
        />
        <Modal.Footer className="flex justify-between">
        
        </Modal.Footer>
      </form>
    </Modal>
  );
}