'use strict';

class CnaHome extends React.Component {

  constructor(props) {
    super(props);
    this.state = { LeftsideLinks:
		[
//			{Text:"Trailer Park Fence", Link:"trailer-park-fence", Date: "May 2020"},
//			{Text:"Reserved Parking!", Link:"parking-spot-july-2019/", Date:""},
//			{Text:"Tapoco April 2019", Link:"tapoco-lodge-apr-2019-with-pat-and-vic-and-nikki/", Date:""},
//			{Text:"Eva and Furkelstern opened a Barkbox", Link:"https://www.youtube.com/watch?v=TO0ANsmCuao", Date:""},
//			{Text:"Vacation May/June 2018", Link:"/bahamas_moscow_and_BC", Date:""},
		],
		  RightsideLinks: 
		[
//			{Text:"Trailer Park Projects WIP June 2020", Link:"/trailer-park-projects-WIP-june-2020/", Date:"June 2020"},
//			{Text:"Trailer Park Re-Lo", Link:"/trailer-park-movin-on-up-june-30-2019", Date:""},
//			{Text:"Airstream pages", Link:"/dotNet/AirstreamPages.aspx", Date:""},
//			{Text:"Old Stuff", Link:"/archive.aspx", Date:""},
		]
	 };
  }

  fnRenderDateAdded(d) {
		if (d) {
			return ( <span style={{color:"#cc0000"}}>
                                        <i>Added {d}</i>
                                 </span>
				);
		} else {
			return ( <span></span> );
		}

	}

  fnRenderLink(l,i) { 
		return ( <div key={i} style={{marginTop:'15px',float:'left',verticalAlign:'top', width:'231px', align:'left'}}>
				<a  href={l.Link}>{l.Text}</a><br/>
				{this.fnRenderDateAdded(l.Date)}
	    	</div>
		);
  }

  render() {

    return (<div>
                <center>
                <table style={{border:0}}>
                    <tbody>
	                    <tr>
                            <td>
		                        <img alt="The Real Chris and Annette" style={{align:'right'}} src="CnAOval.jpg" />
                            </td>
	                        <td style={{width:'10px'}}></td>
	                        <td>
    	                        <img alt="Chris And Annette. The most awesome people on Earth. Way better than those other Chris and Annettes." style={{border:'0'}} src="ChrisAndAnnette.jpg" />
	                        </td>
	                    </tr>
                    </tbody>
                </table>
                <table style={{width:'500px'}}>
                    <tbody>
                        <tr>
	                        <td>
		                        <hr />
			                        <center><span style={{color:'white', size:'+1'}}><i>"Nothing to see here"</i></span></center>
		                        <hr />
	                        </td>
                        </tr>
                    </tbody>
                </table>
                <table style={{width:'500px', border:0}}>
                    <tbody>
                        <tr>
                            <td style={{verticalAlign:'top', width:'47%', align:'left'}}>
				{this.state.LeftsideLinks.map(this.fnRenderLink.bind(this))}
                            </td>
                            <td style={{width:'10px'}}>
                                <br />
                            </td>
                            <td style={{verticalAlign:'top', width:'47%', align:'left'}}>
				{this.state.RightsideLinks.map(this.fnRenderLink.bind(this))}
		                    </td>
                        </tr>
                    </tbody>
                </table>
                </center>
            </div>);
  }
}