import { css, cx } from "emotion";
import * as React from "react";
import * as Modal from "react-modal";

import { ButtonAtom, IconAtom, TextAtom } from "../../atoms";

// @ts-ignore
import COLORS from "../../constants/colors";

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
// try {
//   Modal.setAppElement('#root');
// } catch (e) {
//   try {
//     Modal.setAppElement('#___gatsby');
//   } catch (e) {}
// }

class AppModalDialog extends React.Component<any, any> {
  public state = {};

  public afterOpenModal: any;

  public closeModal = () => {
    this.props.closeConfirmable();
  }

  public render() {
    return (
      <div>
        <Modal
          isOpen={this.props.isModalVisible}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.props.closeConfirmable}
          className={cx("bg-white br3 outline-0 flex flex-column", css`
            position: absolute;
            box-shadow: 0px 4px 24px rgba(57, 70, 84, 0.06);
            top: 50%;
            left: 50%;
            right: auto;
            bottom: auto;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            max-width: 445px;
          `)}
          overlayClassName={css`
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .2);
            z-index: 998;
          `}
          contentLabel="Confirmation Modal"
        >
          <div onClick={this.props.cancel} >
            <IconAtom
              name="times"
              type="LIGHT"
              className={cx("mv3", css`
              font-size: 24px;
              color: ${COLORS.GREY.DARKER};
              position: absolute;
              right: 15px;
              &:hover{
                cursor: pointer;
              }
              `)}
            />
          </div>
          <div className="flex flex-column">
            <div className="flex flex-column ph5-ns ph4 pv4-ns pv3 justify-center align-center items-center">
              <IconAtom
                name="exclamation-circle"
                type="LIGHT"
                className={cx("mv3", css`font-size: 108px; color: ${COLORS.RED.NORMAL}`)}
              />
              <TextAtom
                size="XL"
                className={cx("fw6 mt3 mb3", css`
                font-size: 18px;
                line-height: 34px;
                color: ${COLORS.BLACK.NORMAL};
                text-align: center;
                `)}
              >
                {this.props.title}
              </TextAtom>
              <TextAtom
                size="M"
                className={cx("mt2", css`color: ${COLORS.BLACK.LIGHTER}; line-height: 26px; text-align: center;`)}
              >
                {this.props.message}
              </TextAtom>
            </div>
            <div
              className={cx("flex flex-row justify-center items-center pv3 bt", css`
                border-color: ${COLORS.WHITE.NORMAL}; padding-left: 4rem; padding-right: 4rem; margin-bottom: 25px;
              `)}
            >
              <ButtonAtom
                type="PURPLE_DARKER_OUTLINE"
                onClick={this.props.confirm}
                className={cx("ph5 mh1", css`
                width: 50% !important;
                font-size: 16px !important;
                border: 1px solid #5a51e6 !important;
                padding-top: 0px !important;
                padding-bottom: 0px !important;
                height: 40px !important;
                `)}
                data-test="confirmable-confirm"
              >
                Ya
              </ButtonAtom>
              <ButtonAtom
                type="PURPLE_DARKER"
                onClick={this.props.cancel}
                className={cx("ph5 mh1", css`
                width: 50% !important;
                font-size: 16px !important;
                padding-top: 0px  !important;
                padding-bottom: 0px !important;
                height: 40px !important;
                `)}
                data-test="confirmable-cancel"
              >
                Batal
              </ButtonAtom>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

interface IProps {
  children: any;
}

class Confirmable extends React.Component<IProps, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      isVisible: false,
      title: props.titleMessage ? props.titleMessage : "Apa kamu Yakin?" || null,
      message: props.confirmationMessage || null,
      confirmableAction: props.confirmableAction || null,
      confirmableResponse: null,
    };
  }

  public setConfirmation = (confirmationMessage: string, titleMessage: string, confirmableAction: any) => {
    this.setState({
      isVisible: true,
      title: titleMessage,
      message: confirmationMessage,
      confirmableAction,
      confirmableResponse: {
        isIdle: true,
        isConfirmed: false,
      },
    });
  }

  public showConfirmation = () => {
    this.setState({
      isVisible: true,
      confirmableResponse: {
        isIdle: true,
        isConfirmed: false,
      },
    });
  }

  public cancel = () => {
    this.setState({
      isVisible: false,
      confirmableResponse: {
        isIdle: true,
        isConfirmed: false,
      },
    });
  }

  public confirm = () => {
    if (this.state.confirmableAction) {
      this.state.confirmableAction();
    }
    this.setState({
      isVisible: false,
      confirmableResponse: {
        isIdle: false,
        isConfirmed: true,
      },
    });
  }

  public closeConfirmable = () => {
    this.setState({ isVisible: false });
  }

  public render() {
    return [
      <AppModalDialog
        key="confirmable-component-modal"
        isModalVisible={this.state.isVisible}
        closeConfirmable={this.closeConfirmable}
        title={this.state.title}
        message={this.state.message}
        cancel={this.cancel}
        confirm={this.confirm}
      />,
      <div key="confirmable-component-children">
        {this.props.children({
          confirm: this.setConfirmation,
          confirmableResponse: this.state.confirmableResponse, // will be deprecated
          showConfirmation: this.showConfirmation,
        })}
      </div>,
    ];
  }
}

export { Confirmable };