import "./Box.less";
import React, { cloneElement } from "react";
import { Row, Tooltip } from "antd";
import classNames from "classnames";
import { BoxesContext } from "../Boxes/Boxes";
import Button from "../Button/Button";
import DemioIcon from "../Icon/Icon";

const Box = ({
  icon,
  title,
  hint,
  doneText,
  onDone,
  iconFill,
  fullSize,
  smallSize,
  className,
  showDone,
  canContinue,
  children,
  hide,
  openBox,
  closeBox,
  showContinue,
  nextStep,
  incrementStep,
  id,
  iconSize = 36,
  extraInfo,
  preventHeaderClick = false,
}) => {
  const onHeaderClick = () => {
    if (!preventHeaderClick) {
      !hide ? closeBox() : openBox();
    }
  };
  return (
    <div className={classNames({ "Box-wrapper": true, "--open": !hide })} id={id}>
      <div
        className={classNames({
          [className]: className,
          Box: true,
          "--open": !hide,
          "--no-hover": preventHeaderClick,
        })}
        onClick={onHeaderClick}
      >
        <div className="Box-header">
          {!hide && <div className="Box-accent animated fadeIn" />}
          {icon && (
            <DemioIcon
              className={classNames({ "Box-icon": true, "demio-icon": true })}
              width={iconSize}
              type={icon}
              fill={iconFill ? iconFill : ""}
            />
          )}
          <div className="Box-info">
            <div className="Box-title">{title}</div>
            {hint && <div className={classNames({ "Box-hint": true })}>{hint}</div>}
          </div>
          {showDone && !hide && (
            <div className="Box-done">
              <Button
                onClick={() => onDone && onDone()}
                small
                white
                className={classNames({ "Box-done": true, animated: true, fadeIn: true })}
                title={doneText || "DONE"}
              />
            </div>
          )}
          {extraInfo && hide && <div className="Box-extra-info">{extraInfo}</div>}
        </div>
      </div>
      <div className={classNames({ "Box-border": true, hide, animated: true, fadeIn: true })}>
        <div
          className={classNames({
            "Box-content": true,
            "--full-size": fullSize,
            "--small-size": smallSize,
          })}
        >
          <BoxesContext>
            {(boxesContext) =>
              cloneElement(children, {
                boxesContext,
                show: !hide,
              })
            }
          </BoxesContext>
        </div>
        {showContinue && (
          <Row type="flex" justify="center" className="Box-continue">
            {canContinue ? (
              <Button title="CONTINUE" onClick={() => (incrementStep ? nextStep() : closeBox())} disabled={!canContinue} />
            ) : (
              <Tooltip title="Please fill the required fields." overlayStyle={{ maxWidth: 350 }}>
                <span className="hover-fix">
                  <Button title="CONTINUE" disabled />
                </span>
              </Tooltip>
            )}
          </Row>
        )}
      </div>
    </div>
  );
};

export default Box;