import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
import PreviewControls from './PreviewControls';
import PreviewContent from './PreviewContent';
import PreviewDisclaimer from './PreviewDisclaimer';
import DevicePreviewContent from './DevicePreviewContent';
import {
  OS_OPTIONS,
  DEFAULT_OS,
  DEFAULT_BROWSER,
} from './constants';
import { getBrowserOptionsForOS } from './config/notificationMappings';
import messages from '../messages';
import './preview.scss';

/**
 * WebPushPreview Component
 * 
 * Main preview component for web push notifications.
 * Displays OS/Browser dropdowns, preview area, and disclaimer text.
 * Receives live values from form state (notificationTitle, message, redirectUrl).
 */
const WebPushPreview = ({
  notificationTitle,
  notificationBody,
  url,
  imageSrc,
  brandIconSrc,
  buttons,
  onClickShowInAllDevices,
}) => {
  const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
  const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);
  const [showPreviewSlideBox, setShowPreviewSlideBox] = useState(false);

  const browserOptionsForOS = getBrowserOptionsForOS(selectedOS);

  const handleOSChange = (value) => {
    setSelectedOS(value);
  };

  const handleBrowserChange = (value) => {
    setSelectedBrowser(value);
  };

  // Coerce browser when OS change removes current browser option
  React.useEffect(() => {
    const hasBrowser = browserOptionsForOS.some((option) => option.value === selectedBrowser);
    if (!hasBrowser && browserOptionsForOS.length) {
      setSelectedBrowser(browserOptionsForOS[0].value);
    }
  }, [browserOptionsForOS, selectedBrowser]);

  const handleOpenPreviewSlideBox = () => {
    if (onClickShowInAllDevices) {
      onClickShowInAllDevices();
    } else {
      setShowPreviewSlideBox(true);
    }
  };

  const handleClosePreviewSlideBox = () => {
    setShowPreviewSlideBox(false);
  };

  return (
    <CapRow className="webpush-preview-container">
      <CapColumn span={24}>
        <PreviewControls
          selectedOS={selectedOS}
          selectedBrowser={selectedBrowser}
          osOptions={OS_OPTIONS}
          browserOptions={browserOptionsForOS}
          onOSChange={handleOSChange}
          onBrowserChange={handleBrowserChange}
          layoutMode="newRow"
          showStateDropdown={false}
        />
        <PreviewContent
          notificationTitle={notificationTitle}
          notificationBody={notificationBody}
          url={url}
          selectedOS={selectedOS}
          selectedBrowser={selectedBrowser}
          notificationState="Collapsed"
          imageSrc={imageSrc}
          brandIconSrc={brandIconSrc}
          buttons={buttons}
        />
        <PreviewDisclaimer />
        <CapRow className="preview-all-devices-button">
          <CapColumn span={24}>
            <CapButton
              type="flat"
              onClick={handleOpenPreviewSlideBox}
              className="preview-all-devices-trigger"
              data-test-id="webpush-preview-toggle"
            >
              <FormattedMessage {...messages.previewInAllDevices} />
            </CapButton>
          </CapColumn>
        </CapRow>
      </CapColumn>
      <CapSlideBox
        header={<FormattedMessage {...messages.webPushNotificationPreview} />}
        handleClose={handleClosePreviewSlideBox}
        show={showPreviewSlideBox}
        size="size-xl"
        className="webpush-preview-slidebox"
        content={(
          <DevicePreviewContent
            notificationTitle={notificationTitle}
            notificationBody={notificationBody}
            url={url}
            imageSrc={imageSrc}
            brandIconSrc={brandIconSrc}
            buttons={buttons}
          />
        )}
      />
    </CapRow>
  );
};

WebPushPreview.propTypes = {
  notificationTitle: PropTypes.string,
  notificationBody: PropTypes.string,
  url: PropTypes.string,
  imageSrc: PropTypes.string,
  brandIconSrc: PropTypes.string,
  buttons: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string,
      url: PropTypes.string,
      type: PropTypes.string,
    })
  ),
  onClickShowInAllDevices: PropTypes.func,
};

WebPushPreview.defaultProps = {
  notificationTitle: '',
  notificationBody: '',
  url: '',
  imageSrc: '',
  brandIconSrc: '',
  buttons: [],
};

export default WebPushPreview;

