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,
}) => {
  console.log("orderSummary", orderSummary);
  let price;
  if (orderSummary?.plan?.pricing[0].amount) {
    console.log(orderSummary?.plan?.pricing[0]);
  }
  //? orderSummary?.plan?.pricing[1].amount
  //: orderSummary?.plan?.pricing[0].amount;
  const planName = "orderSummary.plan.name;";
  return (
    <Modal show="true" size="lg">
      <Modal.Header closeButton>
        <Modal.Title>Enter Payment Information</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className="payment-modal-text-wrapper">
          Subrscription Type:{planName}
        </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;