/**
 * EditorToolbar - Toolbar component for HTML Editor
 *
 * Features:
 * - Preview mode selection (Desktop/Mobile/Mobile Device)
 * - Fullscreen toggle
 * - Save button with state-aware disabled state
 * - Internationalization support
 * - Responsive layout with proper spacing
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Layout, Typography } from 'antd';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';

import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
import { FONT_COLOR_01, CAP_SPACE_04, CAP_SPACE_08 } from '@capillarytech/cap-ui-library/styled/variables';

// Component imports
import { useEditorContext } from '../common/EditorContext';

// Constants
import { HTML_EDITOR_DOC_URL, HTML_EDITOR_VARIANTS } from '../../constants';

// Styles
import './_editorToolbar.scss';

// Messages
import messages from '../../messages';

const { Header } = Layout;
const { Text } = Typography;

const EditorToolbar = ({
  intl,
  showFullscreenButton = true,
  onLabelInsert,
  onSave,
  onToggleFullscreen,
  className = '',
  isFullscreenMode = false,
  variant = HTML_EDITOR_VARIANTS.EMAIL,
  showTitle = true,
}) => {
  // Context hooks - enabling for Step 10 testing
  const { layout, content } = useEditorContext();

  // Destructure context for better readability
  const { previewMode } = layout || {};
  const { isDirty, isEmpty } = content || {};

  const handleSave = () => {
    onSave?.();
  };

  return (
    <Header className={`editor-toolbar ${className}`}>
      {/* Left Section - Title (conditional) */}
      {showTitle && (
        <CapRow className="editor-toolbar__left" align='middle' justify='center'>
          <Text strong className="editor-toolbar__title">
            {variant === HTML_EDITOR_VARIANTS.INAPP
              ? intl.formatMessage(messages.inAppEditor)
              : intl.formatMessage(messages.htmlEditor)
            }
          </Text>
          <CapTooltipWithInfo
            title={(
              <FormattedMessage
                {...messages.htmlEditorTooltip}
                values={{
                  docLink: (
                    <a
                      href={HTML_EDITOR_DOC_URL}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <FormattedMessage {...messages.viewDocumentation} />
                    </a>
                  ),
                }}
              />
            )}
            infoIconProps={{
              style: { margin: `0 0 -${CAP_SPACE_04} ${CAP_SPACE_08}`, color: FONT_COLOR_01 },
            }}
            autoAdjustOverflow
            placement="top"
          />
        </CapRow>
      )}

      {/* Right Section - Actions */}
      <CapRow useLegacy className="editor-toolbar__right">
        {showFullscreenButton && (
          <CapButton
            type="text"
            onClick={onToggleFullscreen}
            className="editor-toolbar__fullscreen-btn"
            aria-label={intl.formatMessage(
              isFullscreenMode ? messages.exitFullscreen : messages.enterFullscreen
            )}
            aria-pressed={isFullscreenMode}
          >
            <CapIcon type={isFullscreenMode ? "collapse2" : "expander"} size="s" />
          </CapButton>
        )}
      </CapRow>
    </Header>
  );
};

EditorToolbar.propTypes = {
  intl: intlShape.isRequired,
  showFullscreenButton: PropTypes.bool,
  onLabelInsert: PropTypes.func,
  onSave: PropTypes.func,
  onToggleFullscreen: PropTypes.func,
  className: PropTypes.string,
  isFullscreenMode: PropTypes.bool,
  variant: PropTypes.oneOf(Object.values(HTML_EDITOR_VARIANTS)),
  showTitle: PropTypes.bool,
};

EditorToolbar.defaultProps = {
  showFullscreenButton: true,
  onLabelInsert: null,
  onSave: null,
  onToggleFullscreen: null,
  className: '',
  isFullscreenMode: false,
  variant: HTML_EDITOR_VARIANTS.EMAIL,
  showTitle: true,
};

export default injectIntl(EditorToolbar);
