import * as React from 'react';
import { Input } from 'reactstrap';
import { s3Url } from '../../../constants/envVariables';
import { encryptAESString, getPaymentUrl, getUUID } from '../../../helpers/common-helper';

export interface Props {
  transUserPassword: string;
  transUserName: string;
  authkey: string;
  authiv: string;
  isResponsed: boolean;
  [key: string]: any;
  toggle: any,
  env: string
}

export interface State {
  payerMobile: string | number;
  submitted: boolean;
  currentState: number;
  clientCode: string;
  clientTxnId: string;
  payerName: string,
  payerEmail: string,
  amount: string,
  [key: string]: any,
  showFormPD: boolean,
  showFormCD: boolean,
  udf1: string,
  udf2: string,
  udf3: string,
  udf4: string,
  udf5: string,
  udf6: string,
  udf7: string,
  udf8: string,
  udf9: string,
  udf10: string,
  udf11: string,
  udf12: string,
  udf13: string,
  udf14: string,
  udf15: string,
  udf16: string,
  udf17: string,
  udf18: string,
  udf19: string,
  udf20: string,
  channelId: string,
  programId: string,
  mcc: string,

}

export default class ClientDetails extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      submitted: false, currentState: 0, payerMobile: "", clientTxnId: "", clientCode: "", payerName: "", payerEmail: "", amount: "", showFormCD: true, showFormPD: true, udf1: "", udf2: "", udf3: "", udf4: "", udf5: "", udf6: "", udf7: "", udf8: "", udf9: "", udf10: "", udf11: "", udf12: "", udf13: "", udf14: "", udf15: "", udf16: "", udf17: "", udf18: "", udf19: "", udf20: "", channelId: "", programId: "", mcc: ""
    };

  }


  componentDidMount(): void {

    // ?clientCode=TM001&encResponse=0WaBLOC/95n0Dd37I8tROEUSF6OO2190JFXJHAyhH190dMyw0VR76tMidU9w20ydXwziilLK7Kq0u9AfDos8t1GNlQqNwSCvq+bcBrTD7xD602ZsnjKRnCb5xICCRaQXuAOiiO4vLIyloobdCaAMNanwEg4fIHKyu5iMy90SzDDPwFBLN0sWuQ4k10HGkVX0/ToRSs6tRIyPYritJO1enWzw/LCByp17pfsF65/H7rlZ3RUXGqIQb/iTVny+bO5nCQqFKhydXc9YpRI+4+pWGms/A+THehAiKKTFp75szvE1go8IoMEPCH4BI1FCr7NBKGHrhFAm+ziWP8RXEXLa+e441Jvmeo62qZKX4lfYMF7T9w8llfdWTsYke5uV6nljvn9wC1WKJXyLhuER8gqIORh28ptVmE9INBT4Wnc22VX5DApEnhQCLH7YXpz6XpYmmaCZiIVnjV5gPDTewrzpCacRE0VAqtVnZDeZq4CG/zRkWQRlTCjk4OJNKQEKPNv05aFqbsQ/eSBb6vVjkQeuVrKH9ByZU+E/O/MhcIzlsbCzuw/+wNfz2eTFxiARIR+AjcPBR2DkupOV03wRnfds63m4Xeja983IYChfC5ZCtedKGYmK+a9kpu/S8BvJqWr4cxpnr/3ScLNCCP78odxQ7+XL3A9fx5PDPj5YMfYdc+5rMqs0/VWYeUaKohX0JbKSkmTDgIwG9sV4F/nDZDhh8ufDE/cJm5H/M8WjqKjWiBXmSDe/z27O7qz2jjxnevNNVPcHm75P2Tic2Prh17Ov0zx8sqW4b16APwYFc9BxHY8gkS8jGlLNjavOZWHJjIuAMy7qX3paRJUHdo8v2BJtnOXIbTQyq85DPNJix2Cvr2di9qYL6psJM0OeyA8v6Bjpl56D+6Km1thDknrZ7WGdYrb90TH6UKmUfd4YbMG6vtjSiVI0qPd0obAPSNJWedtts+F0uyMajysvmO3n2EEo+g==
    this.setState({ ...this.props }, (() => {
      const { payerMobile, clientCode, payerName, payerEmail, amount, clientTxnId } = this.state;
      const emailRegex = /\S+@\S+\.\S+/;

      let form: any = document.getElementById('pg-form');
      const disable = (!payerMobile || !clientCode || !payerName || !amount || !emailRegex.test(payerEmail) || !clientTxnId);
      if (!disable) {
        form.submit(); //If we have all the value then automatically submit the form
      }
    }));

  }

  componentDidUpdate(prevProps: Readonly<Props>): void {
    if (prevProps.isResponsed !== this.props.isResponsed) {
      this.setState({ ...this.props });
    }
  }

  onchangeHandler = (e: any) => {
    const { value, name } = e.target;
    if (name === "payerMobile" || name === "amount") {
      const regex = /^\d+$/;
      regex.test(value || "12") && this.setState({ [name]: value });
    } else {
      this.setState({ [name]: value });
    }

  }

  getEncData = () => {
    const { payerName, payerEmail, amount, clientCode, clientTxnId, payerMobile, udf1, udf2, udf3, udf4, udf5, udf6, udf7, udf8, udf9, udf10, udf11, udf12, udf13, udf14, udf15, udf16, udf17, udf18, udf19, udf20, channelId, programId, mcc, } = this.state;
    const { transUserName, transUserPassword, authkey, authiv } = this.props;

    let callbackUrl = window.location.href; //Location of the 
    let data = `payerName=${payerName}&payerEmail=${payerEmail}&payerMobile=${payerMobile}&clientTxnId=${clientTxnId ? clientTxnId : getUUID()}&amount=${amount}&clientCode=${clientCode}&transUserName=${transUserName}&transUserPassword=${transUserPassword}&callbackUrl=${callbackUrl}&udf1=${udf1}&udf2=${udf2}&udf3=${udf3}&udf4=${udf4}&udf5=${udf5}&udf6=${udf6}&udf7=${udf7}&udf8=${udf8}&udf9=${udf9}&udf10=${udf10}&udf11=${udf11}&udf12=${udf12}&udf13=${udf13}&udf14=${udf14}&udf15=${udf15}&udf16=${udf16}&udf17=${udf17}&udf18=${udf18}&udf19=${udf19}&udf20=${udf20}&channelId=${channelId ? channelId : "npm"}&programId=${programId ? programId : "c"}&mcc=${mcc}`
    let enc: string = encryptAESString(data, authkey, authiv)
    return enc;
  };



  render() {
    const { showFormCD, showFormPD } = this.state;

    const { payerMobile, clientCode, payerName, payerEmail, amount } = this.state;
    const emailRegex = /\S+@\S+\.\S+/;
    const disable = (!payerMobile || !clientCode || !payerName || !amount || !emailRegex.test(payerEmail));
    const { env } = this.props;
    return (
      <React.Fragment>
        <div id="sdkPopup">
          <div className="popupHeader">
            <img src={s3Url + "lock.svg"} alt="" />
            <span>Payment Details</span>
            <span onClick={this.props.toggle} className="close cursor-pointer" />

          </div>
          <div className="popupBody">

            <form id="pg-form" action={getPaymentUrl(env)} method="post">
              <div className="activity">
                <Input type="hidden" name="encData"
                  value={!disable ? this.getEncData() : ""}
                  id="frm1" />
                <Input type="hidden" name="clientCode" value={clientCode} id="frm2"></Input>
                <div className="form ">
                  <div className="form-header">
                    <h3 className="form-heading text-blue">Payment Details:</h3>
                    <img src={s3Url + "arrow_drop_down.svg"} className={`expandIcon  ${(showFormPD) && "down"}`} alt="arrow up" onClick={() => {
                      this.setState({ showFormPD: !showFormPD })
                    }} />
                  </div>
                  <form action="" className={`form-collapsible form-collapsible-client  ${(showFormPD) && "showForm"}`}>
                    <label >Client Code</label>
                    <div className="input inputWithIcon">
                      <span className="inputIcon disabled"><img src={s3Url + "sticky_note.svg"} alt="" /></span>
                      <Input disabled value={clientCode} required />
                    </div>
                    <label >Full Name</label>
                    <div className="input inputWithIcon">
                      <span className="inputIcon"><img src={s3Url + "person_pin.svg"} alt="" /></span>
                      <Input required value={payerName} name="payerName" onChange={this.onchangeHandler} />
                    </div>
                    <label >Amount</label>
                    <div className="input inputWithIcon">
                      <span className="inputIcon"><img src={s3Url + "rupee.svg"} alt="" /></span>
                      <Input required value={amount} name="amount" onChange={this.onchangeHandler} />
                    </div>
                  </form>
                </div>
                <div className="form ">
                  <div className="form-header">
                    <h3 className="form-heading text-blue">Contact Information:</h3>
                    <img src={s3Url + "arrow_drop_down.svg"} className={`expandIcon  ${(showFormCD) && "down"}`} alt="arrow up" onClick={() => {
                      this.setState({ showFormCD: !showFormCD })
                    }} />
                  </div>
                  <form action="" className={`form-collapsible form-collapsible-client  ${(showFormCD) && "showForm"}`}>
                    <label >Email ID</label>
                    <a className="input inputWithIcon">
                      <span className="inputIcon"><img src={s3Url + "mail.svg"} alt="" /></span>
                      <Input required value={payerEmail} type="email" name="payerEmail" onChange={this.onchangeHandler} />
                    </a>
                    <label >Phone</label>
                    <a className="input inputWithIcon">
                      <span className="inputIcon"><img src={s3Url + "settings_phone.svg"} alt="" /></span>
                      <Input maxLength={13} required type='text' value={payerMobile} name="payerMobile" onChange={this.onchangeHandler} />
                    </a>
                  </form>
                </div>
              </div>
              {!disable && <button type="submit" className="primaryButton">Continue</button>}
            </form>
            <div className="credits">
              <div className="text-center flex-center">
                <img src={s3Url + "security.png"} alt="secure" />
                <img src={s3Url + "powered-by-sabpaisa.png"} alt="sabpaisa logo" className="ml-1 clientlogo" />
              </div>
              <div className="partners">
                <img src={s3Url + "rbi.png"} alt="partners" className='partner-logo' />
                <img src={s3Url + "master-card.png"} alt="partners" className='partner-logo' />
                <img src={s3Url + "pci-dss.png"} alt="partners" className='partner-logo' />
                <img src={s3Url + "by-visa.png"} alt="partners" className='partner-logo' />
              </div>
            </div>
          </div>
        </div >
      </React.Fragment >
    )
  }
}