// Generated with util/create-component.js
import { AnimatePresence, motion, Variants } from "framer-motion";
import React, { MouseEvent, useEffect, useMemo, useRef } from "react";
import { Caret, Close } from "../Icon";
import "./Modal.scss";
import {
  DrawerDirectionType,
  ModalElementType,
  ModalProps,
} from "./Modal.types";

const ModalVariants: Variants = {
  hide: {
    opacity: 0,
    transition: {
      type: "ease",
      duration: 0.2,
    },
  },
  show: {
    opacity: 1,
    transition: {
      type: "ease",
      duration: 0.2,
    },
  },
};

const modalAnim = {
  initial: { opacity: 0, scale: 0.9 },
  animate: { opacity: 1, scale: 1 },
  exit: { opacity: 0, scale: 0 },
};
const drawerAnim = {
  bottom: {
    initial: { opacity: 0, y: 50 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: 50 },
  },
  top: {
    initial: { opacity: 0, y: -50 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -50 },
  },

  left: {
    initial: { opacity: 0, x: -50 },
    animate: { opacity: 1, x: 0 },
    exit: { opacity: 0, x: -50 },
  },
  right: {
    initial: { opacity: 0, x: 50 },
    animate: { opacity: 1, x: 0 },
    exit: { opacity: 0, x: 50 },
  },
};

const wrapperClassMap: { [key in DrawerDirectionType]: string } = {
  top: "items-start",
  left: "justify-start",
  right: "justify-end",
  bottom: "items-end",
};

const Modal = ({
  children,
  className = "",
  modalBodyClassName = "",
  drawer,
  drawerDirection = "bottom",
  radius = "rounded-lg",
  modalWidth = "max-w-[80rem]",
  modalHeight = "max-h-[80vh]",
  visible,
  onClose,
  hasCloseButton = false,
  showScroll,
}: ModalProps) => {
  const prevVisibleRef = useRef<boolean>();

  const ModalComponent = useMemo(() => {
    const result: {
      [key in ModalElementType]: React.ReactElement | null;
    } = {
      ModalHeader: null,
      ModalBody: null,
      ModalFooter: null,
    };
    if (children) {
      React.Children.forEach(
        children as React.ReactElement[],
        (child: React.ReactElement<{ __TYPE: ModalElementType }>) => {
          if (allowedTypeList.includes(child?.props?.__TYPE)) {
            result[child?.props?.__TYPE] = child;
          }
        }
      );
    }
    return result;
  }, [children]);

  const anim = drawer ? drawerAnim[drawerDirection] : modalAnim;
  const wrapperCss = drawer
    ? `top-0 left-0 w-full h-full ${wrapperClassMap[drawerDirection]}`
    : "justify-center items-center";

  const childCss = drawer
    ? `${["bottom", "top"].indexOf(drawerDirection) > -1 ? "w-full" : "h-full"}`
    : `${modalWidth} ${modalHeight}`;

  const { ModalHeader, ModalBody, ModalFooter } = ModalComponent;

  // TODO: modal close될 때 뒤로가기 이슈로 인해 주석 처리
  // close modal when go back button is clicked
  // useEffect(() => {
  //   const preventGoBack = () => {
  //     if (visible && onClose) {
  //       onClose();
  //       if (history.state.prevUrl !== location.href) {
  //         history.pushState({ prevUrl: location.href }, "", location.href);
  //       }
  //     }
  //   };

  //   if (visible) {
  //     if (history.state.prevUrl !== location.href) {
  //       history.pushState({ prevUrl: location.href }, "", location.href);
  //     }
  //   }

  //   if (prevVisibleRef.current && !visible) {
  //     history.back();
  //   }

  //   window.addEventListener("popstate", preventGoBack);

  //   prevVisibleRef.current = visible;

  //   return () => window.removeEventListener("popstate", preventGoBack);
  // }, [visible]);

  // disable html div scroll when visible
  useEffect(() => {
    if (visible) {
      document.documentElement.classList.add("disable-scroll");
    } else {
      document.documentElement.classList.remove("disable-scroll");
    }
  }, [visible]);

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          data-testid="Modal"
          style={{
            width: "100vw",
            height: "100vh",
            inset: 0,
            zIndex: 9999,
          }}
          className={`fixed flex ${wrapperCss}`}
          variants={ModalVariants}
          initial="hide"
          animate="show"
          exit="hide"
        >
          <ModalOverlayMemo onClose={onClose} />
          <motion.div
            className={`relative border-[1px] border-gray-4 bg-white ${childCss} ${radius} ${className ??
              ""}`}
            variants={ModalVariants}
            {...anim}
          >
            <div
              className={`flex w-full flex-col ${
                drawer ? "max-h-[90vh]" : modalHeight
              }`}
            >
              {hasCloseButton && (
                <div className={`z-1 relative`}>
                  <div
                    style={{ zIndex: 100 }}
                    className={`absolute top-0 left-0 right-0 cursor-pointer bg-white pb-0 ${
                      drawer
                        ? "flex w-full justify-center p-[1.2rem]"
                        : "p-[1.5rem]"
                    } ${radius}`}
                    onClick={onClose}
                  >
                    <div className={drawer ? "" : "ml-auto w-[2.4rem]"}>
                      {drawer ? (
                        <Caret size="2.4rem" direction="down" />
                      ) : (
                        <Close size={18} color="#1a1a1a" /> // #gray10_text
                      )}
                    </div>
                  </div>
                </div>
              )}

              {ModalHeader && (
                <div className="p-[2rem] pb-0">{ModalHeader}</div>
              )}

              <div
                className={`overflow-y-auto break-all pc:p-[3rem] pc:pt-[3.4rem] mobile:p-[2rem] mobile:pt-[3.6rem] ${
                  // TODO: 아이폰 환경에서 drawer 하단 부분이 내비게이션 바에 가려지는 문제 해결
                  drawer && drawerDirection === "bottom"
                    ? "mobile:pb-[12rem]"
                    : ""
                } ${!showScroll && "scrollbar-hide"} ${modalBodyClassName}`}
              >
                {ModalBody}
              </div>
              {ModalFooter && <div className="p-[2rem]">{ModalFooter}</div>}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

const MODAL_HEADER = "ModalHeader";
const MODAL_BODY = "ModalBody";
const MODAL_FOOTER = "ModalFooter";

export const ModalHeader = (props: {
  children?: React.ReactNode;
  __TYPE: ModalElementType;
}) => {
  return <>{props.children}</>;
};
ModalHeader.defaultProps = {
  __TYPE: MODAL_HEADER,
};

export const ModalBody = (props: {
  children?: React.ReactNode;
  __TYPE: ModalElementType;
}) => {
  return <>{props.children}</>;
};
ModalBody.defaultProps = {
  __TYPE: MODAL_BODY,
};

export const ModalFooter = (props: {
  children?: React.ReactNode;
  __TYPE: ModalElementType;
}) => {
  return <>{props.children}</>;
};
ModalFooter.defaultProps = {
  __TYPE: MODAL_FOOTER,
};

const allowedTypeList: ModalElementType[] = [
  MODAL_HEADER,
  MODAL_BODY,
  MODAL_FOOTER,
];

const ModalOverlay: React.FC<{
  onClose?: (e: MouseEvent<HTMLDivElement>) => void;
}> = ({ onClose }) => {
  return (
    <motion.div
      onClick={onClose}
      variants={ModalVariants}
      style={{
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        inset: 0,
        zIndex: 0,
      }}
      className={`absolute h-full w-full`}
    />
  );
};

const ModalOverlayMemo = React.memo(ModalOverlay);

export default Modal;