import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import CustomerSearchSection from '../CustomerSearchSection';
import messages from './messages';

const LeftPanelContent = ({
  isExtractingTags,
  extractedTags,
  selectedCustomer,
  handleCustomerSelect,
  handleSearchCustomer,
  customers,
  isSearchingCustomer,
  handleClearSelection,
  tagsExtracted,
  handleExtractTags,
  renderCustomValuesEditor,
  enableCustomerSearch,
  enableTagExtraction,
  error7078Message,
}) => {
  if (isExtractingTags) {
    return (
      <CapRow type="flex" vertical noWrap align="middle" justify="center" className="loading-container">
        <CapSpin size="large" />
        <CapRow useLegacy className="loading-text">
          <FormattedMessage {...messages.extractingTags} />
        </CapRow>
      </CapRow>
    );
  }
  if (extractedTags?.length > 0) {
    return (
      <>
        {/* Customer Search Section - Only show if enabled */}
        {enableCustomerSearch && (
          <CapRow useLegacy className="panel-section customer-section">
            <CapHeader size="label1" title={<FormattedMessage {...messages.customerSearchTitle} />} />
            <CustomerSearchSection
              selectedCustomer={selectedCustomer}
              onCustomerSelect={handleCustomerSelect}
              onSearch={handleSearchCustomer}
              customers={customers}
              isSearchingCustomer={isSearchingCustomer}
              onClearSelection={handleClearSelection}
            />
            {error7078Message && (
              <CapInfoNote
                className="customer-profile-error-info-note"
                type="error"
                noteText={(
                  <CapLabel type="label31">
                    {error7078Message}
                  </CapLabel>
                )}
              />
            )}
          </CapRow>
        )}
        {/* Tags Section - Only show if tag extraction enabled */}
        {enableTagExtraction && !tagsExtracted && (
          <CapRow useLegacy className="panel-section">
            <CapButton type="link" className="extract-tags-button" onClick={handleExtractTags}>
              <CapLabel type="label33">
                <FormattedMessage {...messages.enterCustomValuesForTags} />
              </CapLabel>
            </CapButton>
          </CapRow>
        )}
        {enableTagExtraction && tagsExtracted && renderCustomValuesEditor()}
      </>
    );
  }
  return (
    <CapInfoNote
      className="no-tags-extracted-info-note"
      noteText={(
        <CapLabel type="label31">
          <FormattedMessage {...messages.noTagsExtracted} />
        </CapLabel>
      )}
    />
  );
};

LeftPanelContent.propTypes = {
  isExtractingTags: PropTypes.bool.isRequired,
  extractedTags: PropTypes.array.isRequired,
  selectedCustomer: PropTypes.object,
  handleCustomerSelect: PropTypes.func.isRequired,
  handleSearchCustomer: PropTypes.func.isRequired,
  customers: PropTypes.array.isRequired,
  isSearchingCustomer: PropTypes.bool.isRequired,
  handleClearSelection: PropTypes.func.isRequired,
  tagsExtracted: PropTypes.bool.isRequired,
  handleExtractTags: PropTypes.func.isRequired,
  renderCustomValuesEditor: PropTypes.func.isRequired,
  enableCustomerSearch: PropTypes.bool,
  enableTagExtraction: PropTypes.bool,
  error7078Message: PropTypes.string,
};

LeftPanelContent.defaultProps = {
  selectedCustomer: null,
  enableCustomerSearch: true,
  enableTagExtraction: true,
  error7078Message: null,
};

export default LeftPanelContent;
