import React from "react";
import { closeModal } from "./Modal.js";
import Button from "../formElements/Button";
import { OtherDropDownApp } from "../formElements/DropDown";
import styled from "styled-components";
import { openToast } from '../ToastComponent/Toast';
import { Toast } from '../ToastComponent/Toast';

const DefaultStyles = styled.div`
  ${() => `
  .button-wrapper{
    display : flex;
    flex-direction: row;
    padding-top: 20px;
  }
  .confirmation-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .Select-menu-outer{
      height: 120px;
      overflow-y: scroll;
    }
  }
  .reason-wrapper{
      padding-bottom: 0px;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      padding-top: 10px;
      .ddWrap{
        margin:0px;
      }
  }
  .textWrap{
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
    font-size: 15px;
    color: rgba(0,0,0,0.8);
  }
  .textWrap.expanded{
    padding: 4% 4% 14% 4%;
  }
  .textWrap.collapsed{
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 8% 2%;
  }
  .reasonLabel{
    margin-bottom: 5px;
    margin-top: 10px;
    font-weight: bold;
  }
  .mr20{
    margin-right:20px;
  }
  .bold{
    font-weight:bold;
  }
`};
`;

//This can be made configurable by adding option to pass a component in prop: body
export default class ConfirmationModalComponent extends React.Component {
  constructor(){
    super();
    this.onReasonSelect = this.onReasonSelect.bind(this);
    this.handleButtonCallback = this.handleButtonCallback.bind(this);
    this.state = {
      'reason':[],
      'remark':[]
    }
  }
  onReasonSelect(val,otherFlag){
    debugger
    var key = (otherFlag)?'remark':'reason';
    var obj = {};
    obj[key] = val
    this.setState(obj);
  }
  handleButtonCallback(){
    if(!(this.state.reason||this.state.remark)){
      openToast({
        message:'Kindly select a reason first'
      })
      return false;
    }
    if (this.props.callBack) {
      this.props.callBack(this.state.reason,this.state.remark);
    }
    closeModal(this.props.modalKey);
  }
  render() {
    return (
      <DefaultStyles>
        <Toast />
        <div className="confirmation-wrapper">
          <div className={`textWrap ${(this.props.reasons)?'expanded':'collapsed'}`}>
          <div className="bold">{this.props.body}</div>
          {
              this.props.reasons
              ?
              <div className="reason-wrapper">
                  <div className="reasonLabel">Select a reason</div>
                  <OtherDropDownApp
                      items={this.props.reasons}
                      placeholder="Select Reason"
                      onChange={this.onReasonSelect}
                      value={this.state.reason}
                  />
              </div>
              :
              null
          }
        </div>
          {this.props.configurable ? (
            this.props.buttonComponent
          ) : (
            <div className="button-wrapper">
              <Button
                onClick={() => closeModal(this.props.modalKey)}
                buttonType="label"
                label="No"
                className="mr20"
              />
              <Button
                label="Yes"
                buttonType="label"
                labelColor="#ffffff"
                backgroundColor="#dd712f"
                onClick={this.handleButtonCallback}
              />
            </div>
          )}
        </div>
      </DefaultStyles>
    );
  }
}
