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,
  modalText,
  handleSignUp,
  setShowPaymentModal,
  handleSignup,
}) => {
  const fieldsChunkSize = 2;

  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">{modalText}</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;
