import React from 'react'
import PropTypes from 'prop-types'

import { pour } from 'sigil-js'
import * as ob from 'urbit-ob'
import ReactSVGComponents from '../components/ReactSVGComponents'

const isValidPatp = patp => {
  let isValid = false
  try {
    isValid = ob.isValidPatp(patp)
  } catch(err) {
    return isValid
  }
  return isValid
}


const ValidatedSigil = ({
  className,
  children,
  style,
  color,
  patp,
  size,
  margin,
  displayPass,
  displayFailure,
  focussed,
  beenFocussed
}) => {

  const colorStyle = styleSelector(displayPass, displayFailure, focussed);

  return (
    <div className={`${className}`} style={style}>
      {
          isValidPatp(patp)
        ? pour({
            patp: patp,
            renderer: ReactSVGComponents,
            size: size,
            colorway: colorStyle,
            margin: margin,
          })
        : <div className={'bg-transparent'} style={{
          width: size,
          height: size,
        }} />
      }
      {
        children
      }
    </div>
  )
}

const styleSelector = (pass, fail, focus) => {
  if (fail === true) return ['#FFFFFF', '#F8C134'];
  if (pass === true) return ['#FFFFFF', '#2AA779'];
  if (focus === true) return ['#FFFFFF', '#4330FC'];
  return ['#FFFFFF', '#7F7F7F'];
}


ValidatedSigil.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  style: PropTypes.object,
};


ValidatedSigil.defaultProps = {
  className: '',
  style: {},
};


export default ValidatedSigil;