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 CapSelect from '@capillarytech/cap-ui-library/CapSelect';
import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
import CapImageUpload from '../../../../v2Components/CapImageUpload';
import CapImageUrlUpload from '../../../../v2Components/CapImageUrlUpload';
import { WEBPUSH } from '../../../CreativesContainer/constants';
import {
  WEBPUSH_MEDIA_TYPES,
  WEBPUSH_MEDIA_TYPES_OPTIONS,
  ALLOWED_IMAGE_EXTENSIONS_REGEX,
  WEBPUSH_IMG_SIZE,
  WEBPUSH_RECOMMENDED_DIMENSIONS,
  IMAGE_UPLOAD_METHODS,
} from '../../constants';

/**
 * MediaSection component - Media type selection and image upload
 */
export const MediaSection = ({
  mediaType,
  onMediaTypeChange,
  imageUpload,
  isLocked,
  isAnyUploadActive,
  formatMessage,
  messages,
  webPush,
  isFullMode,
}) => {
  const {
    uploadMethod,
    imageSrc,
    imageUrl,
    isValidating,
    isUploading,
    uploadAsset,
    setUpdateImageSrc,
    updateOnReUpload,
    handleUrlChange,
    handleValidationStateChange,
    handleUploadStateChange,
  } = imageUpload;

  const isImageFieldActive = isValidating || isUploading;

  return (
    <>
      <CapRow type="flex" vertical noWrap className="creatives-webpush-media">
        <CapHeading type="h4" className="webpush-media-type">
          <FormattedMessage {...messages.mediaType} />
        </CapHeading>
        <CapSelect.CapCustomSelect
          width="100%"
          className="margin-t-4"
          options={WEBPUSH_MEDIA_TYPES_OPTIONS}
          value={mediaType}
          onChange={onMediaTypeChange}
          disabled={isAnyUploadActive}
        />
      </CapRow>
      {mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && (
        <>
          {uploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && (
            <CapRow
              className="webpush-image-upload-section"
              style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
              aria-disabled={isLocked}
            >
              <CapImageUpload
                allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
                imgSize={WEBPUSH_IMG_SIZE}
                uploadAsset={uploadAsset}
                isFullMode={isFullMode}
                imageSrc={imageSrc}
                updateImageSrc={setUpdateImageSrc}
                updateOnReUpload={updateOnReUpload}
                index={0}
                className="cap-custom-image-upload"
                key="webpush-uploaded-image"
                imageData={webPush}
                channel={WEBPUSH}
                showReUploadButton
                recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
              />
            </CapRow>
          )}
          {uploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && (
            <CapRow
              className="webpush-image-url-section"
              style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
              aria-disabled={isLocked}
            >
              <CapImageUrlUpload
                uploadAsset={uploadAsset}
                imgSize={WEBPUSH_IMG_SIZE}
                recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
                sizeLabel={formatMessage(messages.sizeLimit)}
                formatLabel={formatMessage(messages.formatTypes)}
                imageUrl={imageUrl}
                imageSrc={imageSrc}
                onUrlChange={handleUrlChange}
                onValidationStateChange={handleValidationStateChange}
                onUploadStateChange={handleUploadStateChange}
                isExternalUploading={isImageFieldActive}
                disabled={isLocked}
                className="webpush-image-url-upload"
                fileNamePrefix="webpush-image"
              />
            </CapRow>
          )}
        </>
      )}
      <CapDivider />
    </>
  );
};

MediaSection.propTypes = {
  mediaType: PropTypes.string.isRequired,
  onMediaTypeChange: PropTypes.func.isRequired,
  imageUpload: PropTypes.object.isRequired,
  isLocked: PropTypes.bool,
  isAnyUploadActive: PropTypes.bool,
  formatMessage: PropTypes.func.isRequired,
  messages: PropTypes.object.isRequired,
  webPush: PropTypes.object,
  isFullMode: PropTypes.bool,
};

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

export default MediaSection;

