import Button from "../../pageElements/Button";
import Modal from "react-bootstrap/Modal";
import TextInput from "../../pageElements/TextInput";
import { splitEvery } from "../../Utils/Array";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import "../../styles/modals.scss";

const PaymentModal = ({
  buttonLabelText,
  isBusy,
  paymentData,
  paymentfields,
  handleChangePaymentInput,
  orderSummary,
  handleSignUp,
  setShowPaymentModal,
  handleSignup,
  selectedPlan,
  isAnnual,
  fieldsChunkSize,
  numberOfAccountsToAdd,
}) => {
  const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
  const annualAddAccountPrice = monthlyAddAccountPrice * 12;
  const showAdditionaLAccountsView =
    (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
    (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
  const planName = selectedPlan[0].name ? selectedPlan[0].name : null;
  const billingPeriod = isAnnual ? "Annually" : "Monthly";
  const amountToday = isAnnual
    ? selectedPlan[0]?.pricing[0]?.amount
    : selectedPlan[0]?.pricing[1]?.amount;
  console.log("annualAddAccountPrice", annualAddAccountPrice);
  console.log("isAnnual", isAnnual);
  console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
  return (
    <Modal show="true" size="lg">
      <Modal.Header className="payment-modal-header" closeButton>
        <Modal.Title>Enter Payment Information</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className="payment-summary-header">Order Summary</div>
        <div className="order-summary-container">
          <div className="paymentmodal-order-summarybox">
            <div className="payment-modal-text-wrapper">
              <div className="paymodal-summary-right">Subscription Type:</div>
              <div className="paymodal-summary-left">{planName}</div>
            </div>

            <div className="payment-modal-text-wrapper">
              <div className="paymodal-summary-right">
                Billing Period/Amount:
              </div>
              <div className="paymodal-summary-left">
                {billingPeriod} - ${amountToday}
              </div>
            </div>
            {showAdditionaLAccountsView ? (
              <div className="payment-modal-text-wrapper">
                <div className="paymodal-summary-right">
                  Additional Accounts:
                </div>
                <div className="paymodal-summary-left">
                  {isAnnual ? (
                    <p>
                      {" "}
                      {numberOfAccountsToAdd}/ x 12 months = $
                      {annualAddAccountPrice}
                    </p>
                  ) : (
                    <p>
                      {" "}
                      {numberOfAccountsToAdd}/per month = $
                      {monthlyAddAccountPrice}
                    </p>
                  )}
                </div>
              </div>
            ) : (
              <></>
            )}
          </div>
        </div>

        <Form className="payment-form">
          {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
            (names, j) => (
              <Row key={`row${j}-modal`}>
                {names.map((name, i) => (
                  <Col
                    key={`${name}${i + fieldsChunkSize * j}-modal`}
                    className="mb-3"
                  >
                    <TextInput
                      key={`${name}-modal-input`}
                      name={name}
                      value={paymentData[name].value}
                      onChange={(e) => handleChangePaymentInput(e, name)}
                      error={paymentData[name].error}
                      message={paymentData[name].message}
                      label={
                        paymentData[name].value.length === 0
                          ? paymentfields[name].label
                          : ""
                      }
                      type={paymentfields[name].type}
                      values={paymentfields[name].values}
                      disabled={isBusy}
                    />
                  </Col>
                ))}
              </Row>
            )
          )}
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button
          disabled={isBusy}
          className="secondary-button"
          onClick={() => setShowPaymentModal(false)}
          labelText="Cancel"
        />
        <Button
          disabled={isBusy}
          className="primary-button"
          onClick={handleSignup}
          labelText="Signup"
        />
      </Modal.Footer>
    </Modal>
  );
};

export default PaymentModal;
