import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapModal from '@capillarytech/cap-ui-library/CapModal';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
import PreviewControls from '../../../v2Containers/WebPush/Create/preview/PreviewControls';
import PreviewContent from '../../../v2Containers/WebPush/Create/preview/PreviewContent';
import DevicePreviewContent from '../../../v2Containers/WebPush/Create/preview/DevicePreviewContent';
import {
  OS_OPTIONS,
  DEFAULT_OS,
  DEFAULT_BROWSER,
} from '../../../v2Containers/WebPush/Create/preview/constants';
import { getBrowserOptionsForOS } from '../../../v2Containers/WebPush/Create/preview/config/notificationMappings';
import messages from '../messages';

const WebPushPreviewContent = ({
  notificationTitle,
  notificationBody,
  imageSrc,
  brandIconSrc,
  buttons,
  url,
  isUpdating,
  error,
  isFullscreenOpen,
  setIsFullscreenOpen,
  selectedCustomer,
}) => {
  const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
  const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);

  const browserOptionsForOS = getBrowserOptionsForOS(selectedOS);

  // Coerce browser when OS change removes current browser from available options
  useEffect(() => {
    const isValid = browserOptionsForOS.some((opt) => opt.value === selectedBrowser);
    if (!isValid && browserOptionsForOS.length) {
      setSelectedBrowser(browserOptionsForOS[0].value);
    }
  }, [browserOptionsForOS, selectedBrowser]);

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

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

  const handleCloseFullscreen = () => {
    setIsFullscreenOpen(false);
  };

  if (isUpdating) {
    return null;
  }

  if (error) {
    return null;
  }

  return (
    <CapRow className="webpush-test-preview-container webpush-preview-container">
      <CapRow className="webpush-preview-panel">
        <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}
        />
      </CapRow>

      <CapModal
        visible={isFullscreenOpen}
        onCancel={handleCloseFullscreen}
        width="90%"
        centered
        closable={false}
        footer={null}
        title={null}
        maskClosable
        className="webpush-fullscreen-modal webpush-preview-container"
      >
        <CapRow className="webpush-preview-header">
          <div className="webpush-heading-container">
            <CapRow type="flex" className="preview-for">
              <CapLabel type="label16">
                <FormattedMessage {...messages.previewFor} />
              </CapLabel>
              <CapLabel type="label2">
                {selectedCustomer ? selectedCustomer.name : <FormattedMessage {...messages.defaultPreview} />}
              </CapLabel>
            </CapRow>
            <CapIcon
              type="collapse2"
              onClick={() => handleCloseFullscreen()}
              className="webpush-fullscreen-close-icon"
            />
          </div>
        </CapRow>
        <CapDivider className="webpush-fullscreen-divider" />
        <DevicePreviewContent
          notificationTitle={notificationTitle}
          notificationBody={notificationBody}
          url={url}
          imageSrc={imageSrc}
          brandIconSrc={brandIconSrc}
          buttons={buttons}
        />
      </CapModal>
    </CapRow>
  );
};

WebPushPreviewContent.propTypes = {
  notificationTitle: PropTypes.string,
  notificationBody: PropTypes.string,
  imageSrc: PropTypes.string,
  brandIconSrc: PropTypes.string,
  buttons: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string,
      url: PropTypes.string,
      type: PropTypes.string,
    })
  ),
  url: PropTypes.string,
  isUpdating: PropTypes.bool,
  error: PropTypes.string,
  isFullscreenOpen: PropTypes.bool,
  setIsFullscreenOpen: PropTypes.func,
  selectedCustomer: PropTypes.object,
};

WebPushPreviewContent.defaultProps = {
  notificationTitle: '',
  notificationBody: '',
  imageSrc: '',
  brandIconSrc: '',
  buttons: [],
  url: '',
  isUpdating: false,
  error: null,
  isFullscreenOpen: false,
  setIsFullscreenOpen: () => {},
  selectedCustomer: null,
};

export default WebPushPreviewContent;
