import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
import CapInput from '@capillarytech/cap-ui-library/CapInput';
import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
import TagList from '../../v2Containers/TagList';
import messages from './messages';

/**
 * CapTagListWithInput - A reusable component that combines TagList and CapInput
 * for external links/URLs that can be used across all channels
 */
export const CapTagListWithInput = (props) => {
  const {
    intl,
    // TagList props
    tags = [],
    injectedTags = {},
    location = {},
    selectedOfferDetails = [],
    onTagSelect,
    onContextChange,
    moduleFilterEnabled = true,
    className = '',
    userLocale = 'en',
    eventContextTags = [],
    restrictPersonalization = false,
    waitEventContextTags = {},
    // CapInput props
    inputId,
    inputValue = '',
    inputOnChange,
    inputPlaceholder,
    inputErrorMessage = '',
    inputSize = 'default',
    inputMaxLength,
    inputRequired = false,
    inputDisabled = false,
    // Layout props
    headingText,
    headingType = 'h4',
    headingStyle = {},
    containerStyle = {},
    tagListStyle = {},
    inputStyle = {},
    // Custom props
    showHeading = true,
    showTagList = true,
    showInput = true,
    inputProps = {},
    popoverPlacement,
  } = props;

  const { formatMessage } = intl;

  return (
    <CapColumn style={containerStyle}>
      <CapRow align="middle" type="flex" noWrap>
        {showHeading && headingText && (
          <CapHeading type={headingType} style={headingStyle}>
            {headingText}
          </CapHeading>
        )}

        {showTagList && (
          <TagList
            key={`${inputId}_tags`}
            className={className}
            moduleFilterEnabled={moduleFilterEnabled}
            label={formatMessage(messages.addLabels)}
            onTagSelect={onTagSelect}
            onContextChange={onContextChange}
            location={location}
            tags={tags}
            injectedTags={injectedTags}
            userLocale={userLocale}
            selectedOfferDetails={selectedOfferDetails}
            eventContextTags={eventContextTags}
            waitEventContextTags={waitEventContextTags}
            style={tagListStyle}
            popoverPlacement={popoverPlacement}
            restrictPersonalization={restrictPersonalization}
          />
        )}
      </CapRow>
      {showInput && (
        <CapInput
          id={inputId}
          onChange={inputOnChange}
          placeholder={inputPlaceholder}
          value={inputValue}
          size={inputSize}
          maxLength={inputMaxLength}
          errorMessage={inputErrorMessage}
          isRequired={inputRequired}
          disabled={inputDisabled}
          style={inputStyle}
          {...inputProps}
        />
      )}
    </CapColumn>
  );
};

CapTagListWithInput.propTypes = {
  intl: intlShape.isRequired,
  // TagList props
  tags: PropTypes.array,
  injectedTags: PropTypes.object,
  location: PropTypes.object,
  selectedOfferDetails: PropTypes.array,
  onTagSelect: PropTypes.func.isRequired,
  onContextChange: PropTypes.func.isRequired,
  moduleFilterEnabled: PropTypes.bool,
  className: PropTypes.string,
  userLocale: PropTypes.string,
  eventContextTags: PropTypes.array,
  restrictPersonalization: PropTypes.bool,
  waitEventContextTags: PropTypes.object,

  // CapInput props
  inputId: PropTypes.string.isRequired,
  inputValue: PropTypes.string,
  inputOnChange: PropTypes.func.isRequired,
  inputPlaceholder: PropTypes.string,
  inputErrorMessage: PropTypes.string,
  inputSize: PropTypes.oneOf(['small', 'default', 'large']),
  inputMaxLength: PropTypes.number,
  inputRequired: PropTypes.bool,
  inputDisabled: PropTypes.bool,
  inputProps: PropTypes.object,

  // Layout props
  headingText: PropTypes.string,
  headingType: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  headingStyle: PropTypes.object,
  containerStyle: PropTypes.object,
  tagListStyle: PropTypes.object,
  inputStyle: PropTypes.object,

  // Custom props
  showHeading: PropTypes.bool,
  showTagList: PropTypes.bool,
  showInput: PropTypes.bool,
  popoverPlacement: PropTypes.string,
};

CapTagListWithInput.defaultProps = {
  tags: [],
  injectedTags: {},
  location: {},
  selectedOfferDetails: [],
  moduleFilterEnabled: true,
  className: '',
  userLocale: 'en',
  eventContextTags: [],
  restrictPersonalization: false,
  waitEventContextTags: {},
  inputValue: '',
  inputSize: 'default',
  inputRequired: false,
  inputDisabled: false,
  inputPlaceholder: '',
  inputErrorMessage: '',
  inputMaxLength: undefined,
  headingText: '',
  headingType: 'h4',
  headingStyle: {},
  containerStyle: {},
  tagListStyle: {},
  inputStyle: {},
  showHeading: true,
  showTagList: true,
  showInput: true,
  inputProps: {},
  popoverPlacement: undefined,
};

export default injectIntl(CapTagListWithInput);
