content: import React from 'react'
  import PropTypes from 'prop-types'
  import { Link } from 'react-router-dom'
  import { Editor } from 'draft-js'
  import 'draft-js/dist/Draft.css'
  import { EditorState, convertFromRaw } from 'draft-js'
  
  // FPCC
  import { getMediaUrl } from 'common/urlHelpers'
  import AudioButton from 'components/AudioButton'
  import WidgetTextPresentationConcise from 'components/WidgetText/WidgetTextPresentationConcise'
  import { safeJsonParse } from 'common/stringHelpers'
  
  function WidgetTextPresentation({ widgetData }) {
    const { title, textWithFormatting, image, url, urlLabel, audio } = widgetData?.settings
    const format = widgetData?.format || 'left'
  
    const content = safeJsonParse(textWithFormatting)
    const editorState = Object.prototype.hasOwnProperty.call(content, 'blocks')
      ? EditorState.createWithContent(convertFromRaw(content))
      : null
  
    const getImageElement = () => {
      return image ? (
        <div className="col-span-5 lg:col-span-2 overflow-hidden flex items-center order-first lg:order-none">
          <img
            className="m-2 lg:m-0 w-full h-64 sm:h-72 md:h-96 lg:h-3/4-screen object-cover"
            src={getMediaUrl({ id: image, type: 'image', viewName: 'Medium' })}
            alt={title}
          />
        </div>
      ) : null
    }
  
    const getTextElement = () => {
      return (
        <div className={`col-span-5 ${image ? 'lg:col-span-3' : ''} flex items-center`}>
          <div className="max-w-5xl mx-auto text-center px-2 pb-4 lg:p-4">
            <h2 className="text-xl md:text-2xl lg:text-3xl text-secondary font-bold flex items-center justify-center mb-2">
              <span className="inline-block">{title}</span>
              {audio && <AudioButton audioArray={[audio]} iconStyling={'fill-current h-6 w-6 sm:w-8 sm:h-8 ml-2'} />}
            </h2>
            {/* 'wysiwyg' is a custom FV class that applies styling to html tags in wysiwyg editable fields - see main.css */}
            <div className="wysiwyg inline-block text-bold text-base md:text-lg text-fv-charcoal max-w-md md:max-w-4xl mx-auto">
              <Editor editorState={editorState} readOnly={true} />
            </div>
            {url && (
              <div className="mt-2 lg:mt-6 flex justify-center">
                <div className="rounded-lg shadow">
                  <Link
                    to={url}
                    className="w-full flex items-center justify-center px-5 py-2 border border-transparent text-base font-medium rounded-lg text-white bg-secondary hover:bg-secondary-dark md:text-lg"
                  >
                    {urlLabel ? urlLabel : 'More...'}
                  </Link>
                </div>
              </div>
            )}
          </div>
        </div>
      )
    }
  
    if (format === 'concise') {
      return <WidgetTextPresentationConcise widgetData={widgetData} />
    }
  
    if (format === 'full') {
      return (
        <div className="wysiwyg w-screen text-base text-fv-charcoal max-w-md md:max-w-4xl mx-auto bg-white p-4">
          <Editor editorState={editorState} readOnly={true} />
        </div>
      )
    }
  
    if (format === 'right') {
      return (
        <section className="w-full" data-testid="WidgetTextPresentation">
          <div className="grid grid-cols-5 gap-1 lg:gap-0 bg-gradient-to-b from-white to-gray-100">
            {getTextElement()}
            {getImageElement()}
          </div>
        </section>
      )
    }
  
    return (
      <section className="w-full" data-testid="WidgetTextPresentation">
        <div className="grid grid-cols-5 gap-1 lg:gap-0 bg-gradient-to-b from-white to-gray-100">
          {getImageElement()}
          {getTextElement()}
        </div>
      </section>
    )
  }
  
  // PROPTYPES
  const { string, shape } = PropTypes
  WidgetTextPresentation.propTypes = {
    widgetData: shape({
      format: PropTypes.oneOf(['right', 'left', 'concise', 'full']),
      settings: shape({
        title: string,
        textWithFormatting: string,
        url: string,
        urlLabel: string,
        image: string,
        audio: string,
      }),
    }),
  }
  
  export default WidgetTextPresentation
  