import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
import CapInput from '@capillarytech/cap-ui-library/CapInput';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import ButtonList from './ButtonList';
import ButtonForm from './ButtonForm';
import { ON_CLICK_BEHAVIOUR_OPTIONS } from '../../constants';

/**
 * ButtonsLinksSection component - On-click behavior and CTA buttons management
 */
export const ButtonsLinksSection = ({
  onClickBehaviour,
  onClickBehaviourOptions,
  onClickBehaviourChange,
  redirectUrl,
  redirectUrlError,
  onRedirectUrlChange,
  buttonState,
  formatMessage,
  messages,
}) => {
  const {
    buttons,
    isAddingButton,
    buttonBeingAdded,
    editingButtonIndex,
    handleAddPrimaryButton,
    handleAddSecondaryButton,
    handleButtonSave,
    handleButtonCancel,
    handleButtonEdit,
    handleButtonDelete,
    handleButtonReorder,
    isAddFlow,
    isEditFlow,
    showAddPrimaryButton,
    showAddSecondaryButton,
    showDisabledSecondaryDuringPrimary,
    disableSecondaryAddButton,
  } = buttonState;

  const renderButtonForm = (isEditMode) => (
    <ButtonForm
      buttonType={buttonBeingAdded}
      formatMessage={formatMessage}
      onSave={handleButtonSave}
      onCancel={handleButtonCancel}
      initialData={isEditMode && editingButtonIndex !== null ? buttons[editingButtonIndex] : null}
      isEditMode={isEditMode}
    />
  );

  return (
    <>
      <CapRow type="flex" vertical noWrap className="creatives-webpush-buttons-links">
        <CapHeading type="h4" className="webpush-buttons-links">
          <FormattedMessage {...messages.buttonsAndLinks} />
        </CapHeading>
        <CapHeading type="h5" className="webpush-on-click-behaviour">
          <FormattedMessage {...messages.onClickBehaviour} />
        </CapHeading>
        <CapRadioGroup
          options={onClickBehaviourOptions}
          value={onClickBehaviour}
          onChange={onClickBehaviourChange}
        />
        {onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && (
          <CapInput
            id="webpush-redirect-url-input"
            className="webpush-redirect-url-input"
            placeholder={formatMessage(messages.enterUrl)}
            value={redirectUrl}
            onChange={onRedirectUrlChange}
            size="default"
            status={redirectUrlError ? 'error' : ''}
            help={redirectUrlError || ''}
          />
        )}
      </CapRow>
      <CapRow useLegacy className="creatives-webpush-buttons-section">
        <CapHeading type="h5" className="webpush-buttons-section-heading">
          <FormattedMessage {...messages.buttons} />{' '}
          <span className="optional-text">
            <FormattedMessage {...messages.optional} />
          </span>
        </CapHeading>
        <ButtonList
          buttons={buttons}
          onEdit={handleButtonEdit}
          onDelete={handleButtonDelete}
          onReorder={handleButtonReorder}
          onAddPrimary={handleAddPrimaryButton}
          onAddSecondary={handleAddSecondaryButton}
          showAddPrimary={false}
          showAddSecondary={false}
          disabled={isAddFlow}
          disableSecondaryButton={disableSecondaryAddButton}
          isInlineFormVisible={isEditFlow}
          inlineFormIndex={isEditFlow ? editingButtonIndex : null}
          renderInlineForm={isEditFlow ? () => renderButtonForm(true) : null}
        />
        {isAddFlow && buttonBeingAdded && renderButtonForm(false)}
        {(showAddPrimaryButton || showAddSecondaryButton || showDisabledSecondaryDuringPrimary) && (
          <div className="button-add-controls">
            {showAddPrimaryButton && (
              <CapButton
                type="link"
                onClick={handleAddPrimaryButton}
                className="add-primary-button button-add-trigger"
                icon="plus"
              >
                <FormattedMessage {...messages.addButton} />
              </CapButton>
            )}
            {showAddSecondaryButton && (
              <CapButton
                type="link"
                onClick={handleAddSecondaryButton}
                className="add-secondary-button button-add-trigger"
                icon="plus"
              >
                <FormattedMessage {...messages.addButton} />
              </CapButton>
            )}
            {showDisabledSecondaryDuringPrimary && (
              <CapButton
                type="link"
                className="add-secondary-button button-add-trigger"
                icon="plus"
                disabled
              >
                <FormattedMessage {...messages.addButton} />
              </CapButton>
            )}
          </div>
        )}
      </CapRow>
    </>
  );
};

ButtonsLinksSection.propTypes = {
  onClickBehaviour: PropTypes.string.isRequired,
  onClickBehaviourOptions: PropTypes.array.isRequired,
  onClickBehaviourChange: PropTypes.func.isRequired,
  redirectUrl: PropTypes.string.isRequired,
  redirectUrlError: PropTypes.string,
  onRedirectUrlChange: PropTypes.func.isRequired,
  buttonState: PropTypes.object.isRequired,
  formatMessage: PropTypes.func.isRequired,
  messages: PropTypes.object.isRequired,
};

ButtonsLinksSection.defaultProps = {
  redirectUrlError: '',
};

export default ButtonsLinksSection;

