/**
 * PreviewHeader Component
 *
 * Displays preview header with customer info and device toggle controls
 * Matches the old PreviewChrome preview-header div exactly
 */

import React from 'react';
import PropTypes from 'prop-types';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import { FormattedMessage } from 'react-intl';
import {
  CHANNELS,
  DESKTOP, MOBILE, ANDROID, IOS, ACTIVE,
} from '../constants';
import messages from '../messages';

const PreviewHeader = ({
  selectedCustomer,
  device,
  showDeviceToggle,
  onDeviceChange,
  channel,
  setIsFullscreenOpen,
}) => {
  // Determine if this is SMS, WhatsApp, RCS, InApp, MobilePush, or Viber channel (uses Android/iOS) or other channels (uses Desktop/Mobile)
  const isSmsChannel = channel === CHANNELS.SMS;
  const isWhatsappChannel = channel === CHANNELS.WHATSAPP;
  const isRcsChannel = channel === CHANNELS.RCS;
  const isInAppChannel = channel === CHANNELS.INAPP;
  const isMobilePushChannel = channel === CHANNELS.MOBILEPUSH;
  const isViberChannel = channel === CHANNELS.VIBER;
  const isWebPushChannel = channel === CHANNELS.WEBPUSH;
  const isAndroidIosToggle = isSmsChannel || isWhatsappChannel || isRcsChannel || isInAppChannel || isMobilePushChannel || isViberChannel;

  const handleOpenFullscreen = () => {
    setIsFullscreenOpen(true);
  };

  return (
    <CapRow className="preview-chrome">
      <div className="preview-header">
        <CapRow type="flex" className="preview-for">
          <CapLabel type="label1">
            <FormattedMessage {...messages.previewFor} />
          </CapLabel>
          <CapLabel type="label2">
            {selectedCustomer ? selectedCustomer.name : <FormattedMessage {...messages.defaultPreview} />}
          </CapLabel>
        </CapRow>
        {showDeviceToggle && (
          <CapRow type="flex" align="middle" className="device-toggle">
            {isAndroidIosToggle ? (
              // Android/iOS toggle for SMS, WhatsApp, RCS, InApp, and MobilePush
              <>
                <CapIcon
                  type="android"
                  size="s"
                  className={device === ANDROID ? ACTIVE : ''}
                  onClick={() => onDeviceChange(ANDROID)}
                />
                <CapIcon
                  type="ios"
                  size="s"
                  className={device === IOS ? ACTIVE : ''}
                  onClick={() => onDeviceChange(IOS)}
                />
              </>
            ) : (
              // Desktop/Mobile toggle for other channels
              <>
                <CapIcon
                  type="desktop"
                  size="s"
                  className={device === DESKTOP ? ACTIVE : ''}
                  onClick={() => onDeviceChange(DESKTOP)}
                />
                <CapIcon
                  type="mobile"
                  size="s"
                  className={device === MOBILE ? ACTIVE : ''}
                  onClick={() => onDeviceChange(MOBILE)}
                />
              </>
            )}
          </CapRow>
        )}
        {isWebPushChannel && (
          <CapIcon
            type="expander"
            onClick={() => handleOpenFullscreen()}
          />
        )}
      </div>
    </CapRow>
  );
};

PreviewHeader.propTypes = {
  selectedCustomer: PropTypes.shape({
    name: PropTypes.string,
    email: PropTypes.string,
    mobile: PropTypes.string,
  }),
  device: PropTypes.oneOf([DESKTOP, MOBILE, ANDROID, IOS]),
  showDeviceToggle: PropTypes.bool,
  onDeviceChange: PropTypes.func,
  channel: PropTypes.string,
  isFullscreenOpen: PropTypes.bool,
  setIsFullscreenOpen: PropTypes.func,
};

PreviewHeader.defaultProps = {
  selectedCustomer: null,
  device: DESKTOP,
  showDeviceToggle: false,
  onDeviceChange: () => {},
  channel: null,
  isFullscreenOpen: false,
  setIsFullscreenOpen: () => {},
};

export default PreviewHeader;
