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,
}) => {
  if (isExtractingTags) {
    return (
      <CapRow className="loading-container">
        <CapSpin size="large" />
        <CapRow className="loading-text">
          <FormattedMessage {...messages.extractingTags} />
        </CapRow>
      </CapRow>
    );
  }
  if (extractedTags?.length > 0) {
    return (
      <>
        {/* Customer Search Section */}
        <CapRow 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}
          />
        </CapRow>
        {/* Tags Section */}
        {!tagsExtracted && (
          <CapRow className="panel-section">
            <CapButton type="flat" className="extract-tags-button" onClick={handleExtractTags}>
              <CapLabel type="label33">
                <FormattedMessage {...messages.enterCustomValuesForTags} />
              </CapLabel>
            </CapButton>
          </CapRow>
        )}
        {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,
};

LeftPanelContent.defaultProps = {
  selectedCustomer: null,
};

export default LeftPanelContent;
