/**
 * DeviceToggle - Android/iOS device selection for InApp variant
 *
 * Features:
 * - Android/iOS tab switching
 * - "Keep content same for both" checkbox
 * - Integrates with editor context for device state
 */

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

// Cap UI Components
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapRow from '@capillarytech/cap-ui-library/CapRow';

// Constants
import { DEVICE_TYPES } from '../../constants';

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

// Styles
import './_deviceToggle.scss';

const DeviceToggle = ({
  intl,
  activeDevice = DEVICE_TYPES.ANDROID,
  onDeviceChange,
  keepContentSame = false,
  onKeepContentSameChange,
  className = '',
}) => {
  const handleDeviceClick = (device) => {
    if (onDeviceChange && device !== activeDevice) {
      onDeviceChange(device);
    }
  };

  const handleCheckboxChange = (e) => {
    // Handle both event objects and direct boolean values
    const checked = typeof e === 'boolean' ? e : e.target.checked;
    if (onKeepContentSameChange) {
      onKeepContentSameChange(checked);
    }
  };

  return (
    <CapRow type='flex' align='middle' justify='start' className={`device-toggle ${className}`}>
      {/* Device Tabs */}
      <CapRow type='flex' align='center' justify='start' className="device-toggle__tabs">
        {/* Android Tab */}
        <CapButton
          type={activeDevice === DEVICE_TYPES.ANDROID ? "primary" : "default"}
          onClick={() => handleDeviceClick(DEVICE_TYPES.ANDROID)}
          className={`device-toggle__tab ${
            activeDevice === DEVICE_TYPES.ANDROID ? 'device-toggle__tab--active' : ''
          }`}
        >
          <CapIcon type="android" size="s" />
          <span>{intl.formatMessage(messages.android)}</span>
        </CapButton>

        {/* iOS Tab */}
        <CapButton
          type={activeDevice === DEVICE_TYPES.IOS ? "primary" : "default"}
          onClick={() => handleDeviceClick(DEVICE_TYPES.IOS)}
          className={`device-toggle__tab ${
            activeDevice === DEVICE_TYPES.IOS ? 'device-toggle__tab--active' : ''
          }`}
        >
          <CapIcon type="ios" size="s" />
          <span>{intl.formatMessage(messages.ios)}</span>
        </CapButton>
      </CapRow>

      {/* Content Sync Checkbox */}
      <CapRow useLegacy className="device-toggle__sync">
        <CapCheckbox
          checked={keepContentSame}
          onChange={handleCheckboxChange}
          className="device-toggle__checkbox"
        >
          {intl.formatMessage(messages.keepContentSameForBoth)}
        </CapCheckbox>
      </CapRow>
    </CapRow>
  );
};

DeviceToggle.propTypes = {
  intl: intlShape.isRequired,
  activeDevice: PropTypes.oneOf([DEVICE_TYPES.ANDROID, DEVICE_TYPES.IOS]),
  onDeviceChange: PropTypes.func,
  keepContentSame: PropTypes.bool,
  onKeepContentSameChange: PropTypes.func,
  className: PropTypes.string,
};

DeviceToggle.defaultProps = {
  activeDevice: DEVICE_TYPES.ANDROID,
  onDeviceChange: null,
  keepContentSame: false,
  onKeepContentSameChange: null,
  className: '',
};

export default injectIntl(DeviceToggle);
