import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
import CapStepsAccordian from '@capillarytech/cap-ui-library/CapStepsAccordian';
import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
import isEmpty from 'lodash/isEmpty';
import messages from './messages';
import DeliverySettings from './DeliverySettings';
import { CHANNELS } from './constants';

const CHANNELS_WITH_DELIVERY_SETTINGS = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP];

const SendTestMessage = ({
  isFetchingTestCustomers,
  isFetchingTestGroups,
  testEntitiesTreeData,
  handleTestEntitiesChange,
  selectedTestEntities,
  handleSendTestMessage,
  formData,
  channel,
  isSendingTestMessage,
  formatMessage,
  renderAddTestCustomerButton,
  searchValue,
  setSearchValue,
  deliverySettings,
  senderDetailsOptions,
  wecrmAccounts,
  onSaveDeliverySettings,
  isLoadingSenderDetails,
  smsTraiDltEnabled,
  registeredSenderIds,
}) => {
  const addCustomerContent = renderAddTestCustomerButton ? renderAddTestCustomerButton() : null;
  return (
    <CapStepsAccordian
      showNumberSteps={false}
      isChevronIcon
      expandIconPlacement="end"
      items={[
        {
          header: (
            <CapHeader
              size="regular"
              description={<FormattedMessage {...messages.testMessageDescription} />}
              title={<FormattedMessage {...messages.sendTestMessage} />}
            />
          ),
          content: (
            <CapRow className="send-test-content">
              <CapHeader size="label1" title={<FormattedMessage {...messages.testCustomers} />} />
              <CapTreeSelect
                className="test-customers-tree-select"
                dropdownMatchSelectWidth
                dropdownClassName="test-customers-tree-select-dropdown"
                listHeight={280}
                loading={isFetchingTestCustomers || isFetchingTestGroups}
                treeData={testEntitiesTreeData}
                onChange={handleTestEntitiesChange}
                value={selectedTestEntities}
                showSearch
                searchValue={searchValue}
                onSearch={setSearchValue}
                treeNodeFilterProp="title"
                {...(addCustomerContent ? { notFoundContent: addCustomerContent } : {})}
                multiple
                placeholder={formatMessage(messages.testCustomersPlaceholder)}
                dropdownStyle={{ zIndex: 900, maxHeight: 320 }}
                placement="bottomLeft"
                getPopupContainer={(node) => node.closest('.send-test-section') || document.body}
              />
              {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
                <DeliverySettings
                  channel={channel}
                  deliverySettings={deliverySettings || {}}
                  senderDetailsOptions={senderDetailsOptions}
                  wecrmAccounts={wecrmAccounts || []}
                  onSaveDeliverySettings={onSaveDeliverySettings}
                  isLoadingSenderDetails={isLoadingSenderDetails}
                  formatMessage={formatMessage}
                  smsTraiDltEnabled={smsTraiDltEnabled}
                  registeredSenderIds={registeredSenderIds}
                  whatsappAccountFromForm={
                    channel === CHANNELS.WHATSAPP && formData?.accountName
                      ? { accountName: formData.accountName }
                      : undefined
                  }
                />
              )}
              <CapButton
                onClick={handleSendTestMessage}
                disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}
              >
                <FormattedMessage {...messages.sendTestButton} />
              </CapButton>
            </CapRow>
          ),
          key: 1,
        },
      ]}
    />
  );
};

SendTestMessage.propTypes = {
  isFetchingTestCustomers: PropTypes.bool.isRequired,
  isFetchingTestGroups: PropTypes.bool.isRequired,
  testEntitiesTreeData: PropTypes.array.isRequired,
  handleTestEntitiesChange: PropTypes.func.isRequired,
  selectedTestEntities: PropTypes.array.isRequired,
  handleSendTestMessage: PropTypes.func.isRequired,
  formData: PropTypes.object,
  channel: PropTypes.string,
  isSendingTestMessage: PropTypes.bool.isRequired,
  formatMessage: PropTypes.func.isRequired,
  renderAddTestCustomerButton: PropTypes.func,
  searchValue: PropTypes.string,
  setSearchValue: PropTypes.func,
  deliverySettings: PropTypes.object,
  senderDetailsOptions: PropTypes.array,
  wecrmAccounts: PropTypes.array,
  onSaveDeliverySettings: PropTypes.func,
  isLoadingSenderDetails: PropTypes.bool,
  smsTraiDltEnabled: PropTypes.bool,
  registeredSenderIds: PropTypes.array,
};

SendTestMessage.defaultProps = {
  formData: undefined,
  channel: undefined,
  renderAddTestCustomerButton: undefined,
  searchValue: '',
  setSearchValue: () => {}, // no-op when not provided; required by TreeSelect when showSearch is true
  deliverySettings: {},
  senderDetailsOptions: [],
  wecrmAccounts: [],
  onSaveDeliverySettings: undefined,
  isLoadingSenderDetails: false,
  smsTraiDltEnabled: false,
  registeredSenderIds: [],
};

export default SendTestMessage;
