/**
 * View Alert block.
 * @module components/manage/Blocks/Hero/View
 */

import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { Container, Row, Col } from 'design-react-kit';
//import { isCmsUi } from '@plone/volto/helpers';
import { TextBlockView } from '@plone/volto-slate/blocks/Text';
import AlertWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Alert/AlertWrapper';

/**
 * View Alert block class.
 * @class View
 * @extends Component
 */
const View = ({ data, id }) => {
  const background_color = data.bg_color ?? data.color; // backwards compatibility with previous background-color variable name 'color'

  return (
    <AlertWrapper data={data}>
      <section role="alert" className="block alertblock">
        <div className={cx('full-width', 'bg-alert-' + background_color)}>
          <Container className="p-4 pt-5 pb-5">
            <Row className="align-items-start">
              {data.image?.data && (
                <Col sm={2} className="pb-3 image-col">
                  <img
                    src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
                    alt=""
                    aria-hidden="true"
                    className={cx('left-image', [
                      data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
                    ])}
                    loading="lazy"
                  />
                </Col>
              )}
              <Col>
                <TextBlockView id={id} data={{ value: data.text }} />
              </Col>
            </Row>
          </Container>
        </div>
      </section>
    </AlertWrapper>
  );
};

/**
 * Property types.
 * @property {Object} propTypes Property types.
 * @static
 */
View.propTypes = {
  data: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default React.memo(View);