var blessed = require('blessed');
var tilelib = require('tile-lib');

/* Create a screen object */
var screen = blessed.screen({
  smartCSR: true
});

/* Create our tiles */
var t = new tilelib.Tile({
  title: 'Pine Tree', // The title of the tile, wich will appear when you hover
  description: 'A Pine tree.', // A brief description
  render_letter: '▲', // The character it will render to in the map
  foreground: '#66cc99', // Self-Explanatory?
  background: '#9a754c' // Self-Explanatory?
});
/* Same thing for these tiles too. Just too lazy to put the comments. */
var m = new tilelib.Tile({
  title: 'Mountain',
  description: 'A mountain.',
  render_letter: '▲',
  foreground: '#8c8c8c',
  background: '#9a754c'
});
var g = new tilelib.Tile({
  title: 'Ground',
  description: 'Just ground.',
  render_letter: '◼',
  foreground: '#9a754c',
  background: '#9a754c',
});
var h = new tilelib.Tile({
  title: 'House',
  description: 'A wooden house',
  render_letter: '⌂',
  foreground: '#331a00',
  background: '#9a754c'
});
/*
Here we create an 2d array wich will represent our map.
Its composed of row arrays, each with its set of tiles.
A tile in the map is just a reference to our tile object, like t represents our tree tile.
*/
var my_map = [
  [m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,g,g,g,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m],
  [m,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,h,g,g,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,m],
  [m,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,g,g,t,t,t,t,t,t,t,t,t,t,t,t,t,t,m],
  [m,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,g,g,t,t,t,t,t,t,t,t,t,t,t,t,t,m],
  [m,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,g,g,t,t,t,t,t,t,t,t,t,t,t,t,t,t,m],
  [m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m,g,m,m,m,m,m,m,m,m,m,m,m,m,m,m,m]
];
/* Now we transform 'my_map' into a Map object. */
my_map = new tilelib.Map(my_map);

/* Create the box wich will store our map */
var box = blessed.box({
  top: 'center',
  left: 'center',
  width: '70%',
  height: '50%',
  content: '',
  tags: true,
  border: {
    type: 'line'
  },
  style: {
    fg: 'white',
    bg: 'black',
    border: {
      fg: '#f0f0f0'
    },
    hover: {
    //  bg: 'green'
    }
  }
});

/* Add a 'click' listener to the box, wich renders our map */
box.on('click', function(data) {
  my_map.render(box,screen);
  screen.render();
});

/* Exit when ESC, q, or Cntrl-C are pressed */
screen.key(['escape', 'q', 'C-c'], function(ch, key) {
  return process.exit(0);
});

/* Append the box containing the map to the screen and update the view. */
screen.append(box);
screen.render();