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 CapDivider from '@capillarytech/cap-ui-library/CapDivider';
import CapImageUpload from '../../../../v2Components/CapImageUpload';
import { WEBPUSH_BRAND_ICON } from '../../../CreativesContainer/constants';
import {
  BRAND_ICON_OPTIONS,
  ALLOWED_IMAGE_EXTENSIONS_REGEX,
  WEBPUSH_BRAND_ICON_SIZE,
  WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS,
} from '../../constants';

/**
 * BrandIconSection component - Brand icon/logo upload options
 */
export const BrandIconSection = ({
  brandIconOption,
  onBrandIconChange,
  brandIconUpload,
  isLocked,
  isAnyUploadActive,
  formatMessage,
  messages,
  webPush,
  isFullMode,
}) => {
  const {
    imageSrc: brandIconSrc,
    uploadAsset: uploadBrandIconAsset,
    setUpdateImageSrc: setUpdateBrandIconSrc,
    updateOnReUpload: updateOnBrandIconReUpload,
  } = brandIconUpload;

  const brandIconOptions = [
    { value: BRAND_ICON_OPTIONS.DONT_SHOW, label: formatMessage(messages.dontShow) },
    { value: BRAND_ICON_OPTIONS.UPLOAD_IMAGE, label: formatMessage(messages.uploadImage) },
    // NOTE: Commented out due to technical blocker - "Add image URL" option for Brand icon/logo
    // { value: BRAND_ICON_OPTIONS.ADD_IMAGE_URL, label: formatMessage(messages.addImageUrl) },
  ];

  return (
    <>
      <CapRow className="creatives-webpush-brand-icon">
        <CapHeading type="h4" className="webpush-brand-icon">
          <FormattedMessage {...messages.brandIconLogo} />
        </CapHeading>
        <CapRadioGroup
          options={brandIconOptions}
          value={brandIconOption}
          onChange={onBrandIconChange}
          disabled={isAnyUploadActive}
        />
      </CapRow>
      {brandIconOption === BRAND_ICON_OPTIONS.UPLOAD_IMAGE && (
        <CapRow
          className="webpush-brand-icon-upload-section"
          style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
          aria-disabled={isLocked}
        >
          <CapImageUpload
            allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
            imgSize={WEBPUSH_BRAND_ICON_SIZE}
            uploadAsset={uploadBrandIconAsset}
            isFullMode={isFullMode}
            imageSrc={brandIconSrc}
            updateImageSrc={setUpdateBrandIconSrc}
            updateOnReUpload={updateOnBrandIconReUpload}
            index={1}
            className="cap-custom-image-upload"
            key="webpush-brand-icon-uploaded-image"
            imageData={webPush}
            channel={WEBPUSH_BRAND_ICON}
            showReUploadButton
            recommendedDimensions={WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS}
            disabled={isLocked}
          />
        </CapRow>
      )}
      <CapDivider />
    </>
  );
};

BrandIconSection.propTypes = {
  brandIconOption: PropTypes.string.isRequired,
  onBrandIconChange: PropTypes.func.isRequired,
  brandIconUpload: PropTypes.object.isRequired,
  isLocked: PropTypes.bool,
  isAnyUploadActive: PropTypes.bool,
  formatMessage: PropTypes.func.isRequired,
  messages: PropTypes.object.isRequired,
  webPush: PropTypes.object,
  isFullMode: PropTypes.bool,
};

BrandIconSection.defaultProps = {
  isLocked: false,
  isAnyUploadActive: false,
  webPush: {},
  isFullMode: true,
};

export default BrandIconSection;

