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';

const SendTestMessage = ({
  isFetchingTestCustomers,
  isFetchingTestGroups,
  testEntitiesTreeData,
  handleTestEntitiesChange,
  selectedTestEntities,
  handleSendTestMessage,
  formData,
  isSendingTestMessage,
  formatMessage,
}) => (
  <CapStepsAccordian
    showNumberSteps={false}
    isChevronIcon
    expandIconPlacement="right"
    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"
              loading={isFetchingTestCustomers || isFetchingTestGroups}
              treeData={testEntitiesTreeData}
              onChange={handleTestEntitiesChange}
              value={selectedTestEntities}
              multiple
              placeholder={formatMessage(messages.testCustomersPlaceholder)}
            />
            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || 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.isRequired,
  isSendingTestMessage: PropTypes.bool.isRequired,
  formatMessage: PropTypes.func.isRequired,
};

export default SendTestMessage;
