import CapModal from "@capillarytech/cap-ui-library/CapModal";
import { FormattedMessage, injectIntl, intlShape } from "react-intl";
import messages from "./messages";
import React, { useState } from "react";
import PropTypes from "prop-types";
import { CapCard, CapRow, CapColumn } from "@capillarytech/cap-ui-library";
import { CHANNELS } from "./constants";
import CapButton from "@capillarytech/cap-ui-library/CapButton";
import CapIcon from "@capillarytech/cap-ui-library/CapIcon";


const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerData, channel, onSave, intl }) => {
  const [isLoading, setIsLoading] = useState(false);
  return (
    <CapModal
      visible={customerModal[0]}
      onCancel={onCloseCustomerModal}
      centered={true}
      width={500}
      maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
      footer={
        <CapRow justify="start">
          <CapButton
            type="primary"
            onClick={() => onSave({}, setIsLoading)}
            loading={isLoading}
            disabled={isLoading}
          >
            <FormattedMessage {...messages.saveButton} />
          </CapButton>
        <CapButton
          type="secondary"
          onClick={onCloseCustomerModal}
          disabled={isLoading}
        >
          <FormattedMessage {...messages.cancelButton} />
        </CapButton>
      </CapRow>
      }
      title={intl.formatMessage(messages.customerCreationModalTitle)}
      wrapClassName="common-test-preview-modal-wrap existing-customer-modal-wrap"
      className="common-test-preview-modal"
    >
      <div className="existing-customer-modal">
        <CapRow className="existing-customer-modal-intro-row">
          <FormattedMessage {...messages.existingCustomerModalDescription} />
        </CapRow>
        <CapCard className="existing-customer-modal-card">
          <CapRow className="existing-customer-modal-card-row">
            <CapColumn className="existing-customer-modal-avatar">
              <CapIcon type="user-profile" className="existing-customer-modal-avatar-icon" />
            </CapColumn>
            <CapColumn className="existing-customer-modal-details">
              <CapRow className="existing-customer-modal-name">
                {customerData.name || "-"}
              </CapRow>
              <CapColumn className="existing-customer-modal-meta">
                {channel === CHANNELS.EMAIL && customerData.email && (
                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerEmail} />: </span> {customerData.email}</CapRow>
                )}
                {channel === CHANNELS.SMS && customerData.mobile && (
                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerMobile} />: </span>{customerData.mobile}</CapRow>
                )}
                <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerID} />: </span>{customerData.customerId}</CapRow>
              </CapColumn>
            </CapColumn>
          </CapRow>
        </CapCard>
      </div>
    </CapModal>
  );
};

ExistingCustomerModal.propTypes = {
  customerModal: PropTypes.arrayOf(
    PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
  ).isRequired,
  onCloseCustomerModal: PropTypes.func.isRequired,
  customerData: PropTypes.shape({
    name: PropTypes.string,
    email: PropTypes.string,
    mobile: PropTypes.string,
    customerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  }),
  channel: PropTypes.oneOf(Object.values(CHANNELS)).isRequired,
  onSave: PropTypes.func.isRequired,
  intl: intlShape.isRequired,
};

ExistingCustomerModal.defaultProps = {
  customerData: {},
};

export default injectIntl(ExistingCustomerModal);
