text: import { toQuery } from '@core/utils/transforms'
  import PropTypes from 'prop-types'
  import React from 'react'
  
  class Masthead extends React.Component {
  
    static propTypes = {
      block: PropTypes.object,
      website: PropTypes.object
    }
  
    render() {
      const { block } = this.props
      return (
        <div className="block-slideshow">
          { block.content.slides.length > 0 ?
            <>
              { block.content.slides.map((slide, index) => (
                <div className="block-slideshow-slide" key={`slide_${index}`}>
                  { slide.image &&
                    <div className="block-slideshow-slide-picture">
                      <img { ...this._getImage(slide.image) } />
                    </div>
                  }
                  { block.settings.hasCaption &&
                    <div className="block-slideshow-slide-caption">
                      { slide.caption &&
                        <div dangerouslySetInnerHTML={{ __html: slide.caption }} />
                      }
                    </div>
                  }
                </div>
              ))}
            </> :
            <div className="block-slideshow-slide">
              <div className="block-slideshow-slide-picture">
                <img src="https://dummyimage.com/500x250/000000/FFFFFF&text=++IMAGE++" />
              </div>
              <div className="block-slideshow-slide-caption">
                <p>This is a caption</p>
              </div>
            </div>
          }
        </div>
      )
    }
  
    _getImage(image) {
      return {
        src: this._getSrc(image)
      }
    }
  
    _getParsed(src) {
      const parts = src.substr(1).split('/')
      const filename = parts.slice(-1)[0]
      const fileparts = filename.split('.')
      return {
        path: parts.slice(0, parts.length - 1).join('/'),
        basename: fileparts.slice(0, fileparts.length - 1).join('.'),
        extname: fileparts.slice(-1)[0]
      }
    }
  
    _getSrc(image) {
      const { asset, transforms } = image
      const parsed = this._getParsed(asset.path)
      const to = 'webp' || parsed.extname
      if(parsed.extname !== to) transforms.fm = parsed.extname
      const query = toQuery(transforms)
      return `${process.env.DATA_ASSET_CDN_HOST}/imagecache/${query}/${parsed.path}/${parsed.basename}.${to}`
    }
  
  }
  
  export default Masthead
  