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

/** Identifier validation runs in the parent before this modal opens; email/mobile are read-only here. */
const EMPTY_VALIDATION = { email: "", mobile: "" };

const CustomerCreationModal = ({
  customerModal,
  onCloseCustomerModal,
  channel,
  customerData,
  setCustomerData,
  onSave,
  intl,
}) => {
  const [isLoading, setIsLoading] = useState(false);

  // Check if required fields are filled based on channel
  const isRequiredFieldMissing = () => {
    if (channel === CHANNELS.EMAIL && !customerData.email) {
      return true;
    }
    if (channel === CHANNELS.SMS && !customerData.mobile) {
      return true;
    }
    return false;
  };

  const isSaveDisabled = () => isRequiredFieldMissing() || isLoading;

  return (
    <CapModal
      visible={customerModal[0]}
      onCancel={onCloseCustomerModal}
      centered={true}
      width={500}
      maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
      footer={
        <CapRow justify="start" gutter={8}>
            <CapButton
              type="primary"
              onClick={() => onSave(EMPTY_VALIDATION, setIsLoading)}
              disabled={isSaveDisabled()}
              loading={isLoading}
            >
              <FormattedMessage {...messages.saveButton} />
            </CapButton>
            <CapButton
              type="secondary"
              onClick={onCloseCustomerModal}
              disabled={isLoading}
            >
              <FormattedMessage {...messages.cancelButton} />
            </CapButton>
        </CapRow>
      }
      title={<FormattedMessage {...messages.customerCreationModalTitle} />}
      wrapClassName="common-test-preview-modal-wrap"
      className="common-test-preview-modal"
    >
      <CapRow className="customer-creation-modal-row">
        <CapColumn span={24}>
          <span className="customer-creation-modal-description">
            <FormattedMessage {...messages.customerCreationModalDescription} />
          </span>
        </CapColumn>
      </CapRow>

      <CapRow className="customer-creation-modal-row">
        <CapColumn span={24}>
          <CapLabel type="label1" className="customer-creation-modal-label">
            <FormattedMessage {...messages.customerName} />{' '}
            <span className="customer-creation-modal-optional">
              <FormattedMessage {...messages.customerNameOptional} />
            </span>
          </CapLabel>
          <CapInput
            value={customerData.name || ""}
            onChange={e =>
              setCustomerData({ ...customerData, name: e.target.value })
            }
            placeholder={intl.formatMessage(messages.customerNamePlaceholder)}
            size="default"
            className="customer-creation-modal-input"
          />
        </CapColumn>
      </CapRow>

      {channel===CHANNELS.EMAIL && <CapRow className="customer-creation-modal-row">
        <CapColumn span={24}>
          <CapLabel type="label1" className="customer-creation-modal-label">
            <FormattedMessage {...messages.customerEmail} />
          </CapLabel>
          <CapInput
            value={customerData.email || ""}
            onChange={() => {}}
            placeholder={intl.formatMessage(messages.customerEmailPlaceholder)}
            size="default"
            className="customer-creation-modal-input"
            disabled={true}
          />
        </CapColumn>
      </CapRow>}

      {channel===CHANNELS.SMS &&
        <CapRow className="customer-creation-modal-row customer-creation-modal-row--last">
          <CapColumn span={24}>
            <CapLabel type="label1" className="customer-creation-modal-label">
              <FormattedMessage {...messages.customerMobile} />
            </CapLabel>
            <CapInput
            value={customerData.mobile || ""}
            onChange={() => {}}
            placeholder={intl.formatMessage(messages.customerMobilePlaceholder)}
            size="default"
            className="customer-creation-modal-input"
            disabled={true}
          />
        </CapColumn>
      </CapRow>}
    </CapModal>
  );
};

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

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

export default injectIntl(CustomerCreationModal);
