import React from "react";
import PropTypes from "prop-types";
import { Portal } from "react-portal";

import useActivify from "@src/hooks/useActivify";
import useEscapeKey from "@src/hooks/useEscapeKey";
import useEnterKey from "@src/hooks/useEnterKey";

import Box from "@src/components/UI/Box";
import Text from "@src/components/UI/Text";

import {
  ModalWrapper,
  ModalOverlay,
  Modal,
  IconBox,
  ButtonBox,
  modalWidth,
} from "./styledComponents";

const Dialog = ({
  active,
  onClose,
  onEnter,
  title,
  subtitle,
  primaryAction,
  primaryActionText,
  primaryActionType,
  secondaryAction,
  secondaryActionText,
  secondaryActionType,
  children,
  dialogStyles,
}) => {
  const { enabled, visible } = useActivify(active);
  const activeClassName = visible ? "modal-active" : "";

  useEscapeKey(onClose);
  useEnterKey(onEnter);

  if (!enabled) return null;

  /*
      we can only pass width & padding, any other style will be removed.
  */
  const { width, padding } = dialogStyles;
  const styles = {
    width,
    padding,
  };

  return (
    <Portal>
      <ModalWrapper data-testid="modal-wrapper">
        <ModalOverlay
          data-testid="modal-overlay"
          className={activeClassName}
          onClick={onClose}
        />
        <Modal data-testid="modal" className={activeClassName} {...styles}>
          <IconBox src="closeV2" onClick={onClose} />
          {title && (
            <Box justifyContent="center">
              <Text
                data-testid="title"
                variant="display-2.semi-bold"
                color="black.haptik"
                textAlign="center"
                lineHeight="29px"
              >
                {title}
              </Text>
            </Box>
          )}
          {subtitle && (
            <Box justifyContent="center">
              <Text
                data-testid="subtitle"
                variant="body.lg"
                color="black.haptik"
                textAlign="center"
                lineHeight="19px"
              >
                {subtitle}
              </Text>
            </Box>
          )}
          {children}
          <Box justifyContent="center">
            {secondaryActionText && (
              <ButtonBox
                data-testid="secondary-action"
                themed
                variant={secondaryActionType || "secondary"}
                size="regular"
                onClick={() => {
                  secondaryAction();
                  onClose();
                }}
              >
                {secondaryActionText}
              </ButtonBox>
            )}
            {primaryActionText && (
              <ButtonBox
                data-testid="primary-action"
                themed
                variant={primaryActionType || "primary"}
                size="regular"
                onClick={primaryAction}
              >
                {primaryActionText}
              </ButtonBox>
            )}
          </Box>
        </Modal>
      </ModalWrapper>
    </Portal>
  );
};

Dialog.propTypes = {
  active: PropTypes.bool,
  onClose: PropTypes.func,
  onEnter: PropTypes.func,
  title: PropTypes.string,
  subtitle: PropTypes.string,
  primaryAction: PropTypes.func,
  primaryActionText: PropTypes.string,
  secondaryAction: PropTypes.func,
  secondaryActionText: PropTypes.string,
  children: PropTypes.node,
  dialogStyles: PropTypes.object,
  primaryActionType: PropTypes.string,
  secondaryActionType: PropTypes.string,
};

Dialog.defaultProps = {
  active: false,
  onClose: () => {},
  onEnter: () => {},
  title: "",
  subtitle: "",
  primaryAction: () => {},
  primaryActionText: "Yes",
  secondaryAction: () => {},
  secondaryActionText: "No",
  children: null,
  dialogStyles: {
    padding: "50px",
    width: modalWidth,
  },
  primaryActionType: "",
  secondaryActionType: "",
};

export default Dialog;
