import React, { useState } from "react";
import PropTypes from "prop-types";
import { Modal } from "../";
import { IModalProps } from "../modal/modal.d";
import Button from "./button";
import Content from "./content";
import Context from "./dialog-context";
import Footer from "./footer";
import Header from "./header";
import Tab from "./tab";
import Tabs from "./tabs";
import Attention from "./attention";

export interface IDialogProps {
  loading?: boolean;
}

interface IDialogStatic {
  Button: typeof Button;
  Content: typeof Content;
  Footer: typeof Footer;
  Header: typeof Header;
  Tab: typeof Tab;
  Tabs: typeof Tabs;
  Attention: typeof Attention;
}

const Dialog: React.FC<IDialogProps & IModalProps> & IDialogStatic = props => {
  const { children, loading, onClose, size } = props;
  const dataTestId = props["data-testid"] || "honey-ui-dialog";

  const [dialogExpanded, changeDialogExpanded] = useState(false);

  return (
    <Context.Provider
      value={{
        changeDialogExpanded,
        dialogExpanded,
        loading,
        onClose,
        size
      }}
    >
      <Modal
        {...props}
        data-testid={dataTestId}
        onClose={() => onClose()}
        size={dialogExpanded ? "xl" : size}
      >
        <>
          {children}
          {loading && (
            <div
              className="d-flex justify-content-center align-items-center position-absolute w-100 h-100"
              data-testid="honey-ui-dialog-spinner"
              style={{ zIndex: 1000 }}
            >
              {/* TODO use honeyUI loader */}
              <div className="position-absolute w-100 h-100 bg-dark" style={{ opacity: 0.3 }} />
              <div className="spinner-border" role="status">
                <span className="sr-only"></span>
              </div>
            </div>
          )}
        </>
      </Modal>
    </Context.Provider>
  );
};

Dialog.displayName = "Dialog";

Dialog.propTypes = {
  className: PropTypes.string,
  isCentered: PropTypes.bool,
  isCloseOnEscapeKey: PropTypes.bool,
  isFocusOnFirstFocusableEl: PropTypes.bool,
  isRelative: PropTypes.bool,
  isScrollable: PropTypes.bool,
  loading: PropTypes.bool,
  onClose: PropTypes.func.isRequired,
  size: PropTypes.oneOf(["xl", "lg", "sm", "initial"])
};

Dialog.defaultProps = {
  isScrollable: true,
  size: "lg"
};

Dialog.Button = Button;
Dialog.Content = Content;
Dialog.Footer = Footer;
Dialog.Header = Header;
Dialog.Tab = Tab;
Dialog.Tabs = Tabs;
Dialog.Attention = Attention;

export default Dialog;