import React, { PropTypes } from 'react'
import classnames from 'classnames'
import DocumentMeta from 'react-document-meta'
import { Link } from 'react-router'

import { Navbar } from './navbar'
import Block from '../../mobilizations/blocks/components'

import logoIcon from '../../../components/Navigation/Sidenav/logo-icon-no-border.svg'

const Mobilization = props => {
  const {
    mobilization: {
      name,
      goal,
      facebook_share_title,
      facebook_share_description,
      facebook_share_image,
      color_scheme: colorScheme,
      header_font: headerFont,
      body_font: bodyFont
    },
    blocks,
    blockUpdate,
    editable,
    blockEditionMode
  } = props

  const themeClassName = `${colorScheme} ${headerFont}-header ${bodyFont}-body`
  const layoutClassName = editable ? 'flex-auto relative' : 'absolute'
  const layoutStyle = !editable ? { top: 0, bottom: 0, left: 0, right: 0 } : undefined

  const visibleBlocks = blocks.filter(block => !editable ? !block.hidden : true)

  return (
    <div className={classnames('flex flex-column', themeClassName, layoutClassName)} style={layoutStyle}>
      {!blockEditionMode && (
        <Navbar
          mobilization={props.mobilization}
          blocks={blocks}
          editable={editable}
          blockUpdate={blockUpdate}
        />
      )}
      {/* render blocks */}
      <div id='blocks-list' className='flex-auto' style={{ overflowY: 'scroll' }}>
        {visibleBlocks.map((block, index) => (
          <Block
            key={`block-${block.id}`}
            editable={editable}
            block={block}
            canMoveUp={index !== 0}
            canMoveDown={index !== blocks.length - 1}
            {...props}
          />
        ))}
        <div className="col-10 mx-auto">
          <div className="col col-8">
            <p className="mt3 ml2">Feito pra causar. Feito com <strong>
              <a
                href="http://www.bonde.org/"
                style={{ 'color': '#000', 'text-decoration': 'none' }}
                target="_blank">
                BONDE.
              </a></strong>
            </p>
          </div>
          <div className="col col-4">
            <a
              href="http://www.bonde.org/"
              className="right my2 mr2"
              target="_blank">
              <img src={logoIcon} alt="B"   style={{ height: '43px' }} />
            </a>
          </div>
        </div>
      </div>
      {/* render document met to show mobilzation */}
      {!editable ? (
        <DocumentMeta
          title={name}
          description={goal}
          meta={{
            name: {
              'viewport': 'width=device-width, initial-scale=1',
              'og:title': facebook_share_title,
              'og:description': facebook_share_description,
              'og:image': facebook_share_image
            }
          }}
        />
      ) : null}
    </div>
  )
}

Mobilization.propTypes = {
  editable: PropTypes.bool.isRequired,
  mobilization: PropTypes.object.isRequired,
  blocks: PropTypes.array.isRequired,
  blockUpdate: PropTypes.func,
  blockIsRequest: PropTypes.bool,
  widgets: PropTypes.array.isRequired,
  blockEditionMode: PropTypes.bool
}

Mobilization.defaultProps = {
  editable: false,
  blockIsRequest: false,
  blocks: [],
  widgets: []
}

export default Mobilization

@@ -1812,9 +1812,10 @@
 col-
-8
+10
 %22%3E%0A 
@@ -1830,86 +1830,10 @@
    %3C
-p className=%22mt3 ml2%22%3EFeito pra causar. Feito com %3Cstrong%3E%0A              %3Ca%0A  
+a%0A
     
@@ -1863,34 +1863,32 @@
 www.bonde.org/%22%0A
-  
               st
@@ -1936,22 +1936,43 @@
 : 'none'
+, 'line-height': '85px'
  %7D%7D%0A
-  
         
@@ -2012,16 +2012,35 @@
     
-  BONDE.
+Feito pra causar. Feito com
 %0A   
@@ -2051,19 +2051,30 @@
        %3C
-/a%3E
+strong%3E BONDE.
 %3C/strong
@@ -2089,17 +2089,17 @@
       %3C/
-p
+a
 %3E%0A      
@@ -2143,17 +2143,17 @@
 col col-
-4
+2
 %22%3E%0A     
@@ -2243,12 +2243,8 @@
  my2
- mr2
 %22%0A  
@@ -2329,19 +2329,18 @@
 =%7B%7B 
-height
+width
 : '4
-3
+5
 px' 

Fix mobile version