import { h, Component } from 'preact'
import { Link } from 'react-router-dom'

export default class Details extends Component {
  constructor(){
    super()
  }
  onWheel(e){
    e.stopPropagation()
  }
  render() {
    const painting = this.props.painting
    if (! painting) return

    const source_images = findImages(painting.parameters)
    const parameters = breakUpJSON(painting.parameters)
    return (
      <div class='details' onWheel={this.onWheel}>
        <h1>{painting.title}</h1>
        <div class='stats'>
          {painting.medium}<br/>
          {painting.date}<br/>
          {painting.image.caption}
        </div>
        <img src={painting.image.uri} key={painting.image.uri} />
        {painting.originalImage &&
          <div>
            <h2>Original Image</h2>
            <img src={painting.originalImage.uri} />
          </div>
        }
        {painting.parameters &&
          <div>
            <h2>Creation Parameters</h2>
            <div class='parameters'>
              {parameters}
            </div>
            <h2>Source Images</h2>
            {source_images}
          </div>
        }
      </div>
    )
  }
}

class PossiblyBadImage extends Component {
  constructor(){
    super()
    this.state = { error: false }
    this.onError = this.onError.bind(this)
  }
  onError(){
    this.setState({ error: true })
  }
  render(){
    if (this.state.error) return
    return (
      <img src={this.props.source} onError={this.onError} />
    )
  }
}

function findImages(s) {
  s = s || ""
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  let match = urlRegex.exec(s);
  let urls = []
  let url;
  let seen = {};
  while (match != null) {
    url = match[0].replace(/",?/,"")
    if (url && ! seen[url]) {
      seen[url] = true
      urls.push(
        <a href={url} key={url}>
          <PossiblyBadImage
            source={url}
          />
        </a>
      )
    }
    match = urlRegex.exec(s);
  }
  return urls
}

function breakUpJSON(ss){
  return (ss || '').split("} {").map( (s) => {
    return (
      <div>
        {s}
        <br/>
        <br/>
      </div>
    )
  })
}