/* -------------------------------------------------------------------------- */
/*                                  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 Button from "components/controls/Button";
import InputField from "components/controls/InputField";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGCircleProgressIcon } from "assets/svg/circle-progress.svg";
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.CloseButton onClose={onClose} />
        <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">
          <Button type="text" variant="red" onClick={onClose}>
            {t("cancel")}
          </Button>
          <Button
            disabled={!isValid || isSubmiting}
            htmlType="submit"
            type="fill"
            variant="blue"
            glowing={true}
            className="relative"
          >
            <span className={classNames({ "opacity-0": isSubmiting })}>
              {t("save")}
            </span>
            <SVGCircleProgressIcon
              className={classNames(
                "absolute top-1/2 left-1/2 trasnform -translate-x-1/2 -translate-y-1/2 w-8 h-8 stroke-current",
                { "opacity-0": !isSubmiting }
              )}
            />
          </Button>
        </Modal.Footer>
      </form>
    </Modal>
  );
}
