/**
 * PreviewModeGroup - Radio group for selecting preview mode
 *
 * Uses Cap UI RadioGroup instead of Ant Design Radio.Group
 */

import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapButton from '@capillarytech/cap-ui-library/CapButton';

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

const { DESKTOP, MOBILE } = PREVIEW_MODES;

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

// Styles
import './_previewModeGroup.scss';

const PreviewModeGroup = ({
  intl,
  value,
  onChange,
  disabled = false
}) => {
  const handleChange = (e) => {
    onChange(e.target.value);
  };

  // Using Button group instead of Radio.Button (compatibility fix)
  return (
    <div className="preview-mode-group">
      <CapButton
        type="link"
        onClick={() => onChange(DESKTOP)}
        disabled={disabled}
        className={value === DESKTOP ? 'preview-mode-group__btn preview-mode-group__btn--active' : 'preview-mode-group__btn'}
        aria-label={intl.formatMessage(messages.desktop)}
        aria-pressed={value === DESKTOP}
      >
        <CapIcon type="desktop" size="m" />
      </CapButton>
      <CapButton
        type="link"
        onClick={() => onChange(MOBILE)}
        disabled={disabled}
        className={value === MOBILE ? 'preview-mode-group__btn preview-mode-group__btn--active' : 'preview-mode-group__btn'}
        aria-label={intl.formatMessage(messages.mobile)}
        aria-pressed={value === MOBILE}
        >
        <CapIcon type="mobile" size="m" />
      </CapButton>
    </div>
  );
};

PreviewModeGroup.propTypes = {
  intl: intlShape.isRequired,
  value: PropTypes.oneOf(Object.values(PREVIEW_MODES)).isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool
};

PreviewModeGroup.defaultProps = {
  disabled: false
};

export default injectIntl(PreviewModeGroup);
