import cn from "classnames";
import React, { forwardRef, useContext } from "react";
import PropTypes from "prop-types";
import closeIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/svg/clear.svg";
import collapseIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/svg/fullscreen_exit.svg";
import expandIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/svg/fullscreen.svg";
import questionIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/svg/info.svg";
import { Icon, Popover, PopoverBody } from "../";
import DialogContext from "./dialog-context";

export interface IDialogHeaderProps {
  ["data-testid"]?: string;
  className?: string;
  expandable?: boolean;
  help?: string;
  subTitle?: string;
  title: string;
}

const DialogHeader: React.FC<IDialogHeaderProps> = forwardRef(
  (props, ref: React.Ref<HTMLDivElement>) => {
    const { children, className, expandable, help, subTitle, title } = props;
    const dataTestId = props["data-testid"] || "honey-ui-dialog-header";

    const { onClose, changeDialogExpanded, dialogExpanded } = useContext(DialogContext);
    const isExtraHeader = children || subTitle;

    return (
      <>
        <div
          className={cn("modal-header", className, {
            "pb-0": isExtraHeader,
            "border-bottom-0": isExtraHeader
          })}
          data-testid={dataTestId}
          ref={ref}
        >
          <div className="d-flex flex-column flex-fill overflow-hidden">
            <div className="d-flex align-items-center">
              <h3
                className="modal-title flex-fill text-truncate"
                data-testid={`${dataTestId}-title`}
                title={title}
              >
                {title}
              </h3>
              <div className="d-flex align-items-center">
                {expandable && (
                  <Icon
                    className="ml-3"
                    color="muted"
                    data-testid="honeyui-expand-btn"
                    id={dialogExpanded ? collapseIcon.id : expandIcon.id}
                    onClick={() => changeDialogExpanded(!dialogExpanded)}
                    size="md"
                    // TODO: use i18n text
                    title={dialogExpanded ? "Collapse" : "Expand"}
                    viewBox={dialogExpanded ? collapseIcon.viewBox : expandIcon.viewBox}
                  />
                )}
                {help && (
                  <Popover
                    reference={
                      <Icon
                        className="cursor-pointer ml-3"
                        color="muted"
                        data-testid={`${dataTestId}-help-button`}
                        id={questionIcon.id}
                        size="md"
                        title={help}
                        viewBox={questionIcon.viewBox}
                      />
                    }
                    className="w-100"
                    placement="bottom-end"
                  >
                    <PopoverBody className="p-3 overflow-auto">{help}</PopoverBody>
                  </Popover>
                )}
                <Icon
                  className="ml-3 mr-1"
                  color="muted"
                  data-testid="honeyui-close-btn"
                  height={20}
                  size="md"
                  id={closeIcon.id}
                  onClick={onClose}
                  // TODO: use i18n text
                  title="Close"
                  viewBox={closeIcon.viewBox}
                  width={20}
                />
              </div>
            </div>
          </div>
        </div>
        {(children || subTitle) &&
          (subTitle ? (
            <div className="d-flex align-content-stretch">
              <div className="d-flex align-items-center flex-fill border-bottom overflow-hidden px-3 py-2">
                <span
                  className="text-truncate border-bottom border-white"
                  data-testid={`${dataTestId}-subtitle`}
                  title={subTitle}
                >
                  {subTitle}
                </span>
              </div>
              {children}
            </div>
          ) : (
            children
          ))}
      </>
    );
  }
);

DialogHeader.displayName = "DialogHeader";

DialogHeader.propTypes = {
  className: PropTypes.string,
  expandable: PropTypes.bool,
  help: PropTypes.string,
  subTitle: PropTypes.string,
  title: PropTypes.string.isRequired
};

export default DialogHeader;