// Create the dom before requiring react
var DOM = require( './testdom');
DOM();


// Needs to be global to work in Travis CI
React = require('react');

var ReactAddons = require('react/addons'),
	Utils = React.addons.TestUtils,
	Datetime = require('../DateTime'),
	assert = require('assert'),
	moment = require('moment')
;

var createDatetime = function( props ){
	document.body.innerHTML = '';

	React.render(
		React.createElement( Datetime, props ),
		document.body
	);

	return document.body.children[0];
};

var date = new Date( 2000, 0, 15 ),
	mDate = moment( date ),
	strDate = mDate.format('L') + ' ' + mDate.format('LT')
;

describe( 'Datetime', function(){
	it( 'Create Datetime', function(){
		var component = createDatetime({});
		assert( component );
		assert.equal( component.children.length, 2 );
		assert.equal( component.children[0].tagName , 'INPUT' );
		assert.equal( component.children[1].tagName , 'DIV' );
	});

	it( 'input=false', function(){
		var component = createDatetime({ input: false });
		assert( component );
		assert.equal( component.children.length, 1 );
		assert.equal( component.children[0].tagName , 'DIV' );
	});

	it( 'Date value', function(){
		var component = createDatetime({ value: date }),
			input = component.children[0]
		;
		assert.equal( input.value, strDate );
	});

	it( 'Moment value', function(){
		var component = createDatetime({ value: mDate }),
			input = component.children[0]
		;
		assert.equal( input.value, strDate );
	});

	it( 'String value', function(){
		var component = createDatetime({ value: strDate }),
			input = component.children[0]
		;
		assert.equal( input.value, strDate );
	});

	it( 'Date defaultValue', function(){
		var component = createDatetime({ defaultValue: date }),
			input = component.children[0]
		;
		assert.equal( input.value, strDate );
	});

	it( 'Moment defaultValue', function(){
		var component = createDatetime({ defaultValue: mDate }),
			input = component.children[0]
		;
		assert.equal( input.value, strDate );
	});

	it( 'String defaultValue', function(){
		var component = createDatetime({ defaultValue: strDate }),
			input = component.children[0]
		;
		assert.equal( input.value, strDate );
	});

	it( 'dateFormat', function(){
		var component = createDatetime({ value: date, dateFormat: 'M&D' }),
			input = component.children[0]
		;
		assert.equal( input.value, mDate.format('M&D LT') );
	});

	it( 'dateFormat=false', function(){
		var component = createDatetime({ value: date, dateFormat: false }),
			input = component.children[0],
			view = component.children[1].children[0]
		;
		assert.equal( input.value, mDate.format('LT') );
		// The view must be the timepicker
		assert.equal( view.className, 'rdtTime' );
		// There must not be a date toggle
		assert.equal( view.querySelectorAll('thead').length, 0);
	});

	it( 'timeFormat', function(){
		var format = 'HH:mm:ss:SSS',
			component = createDatetime({ value: date, timeFormat: format }),
			input = component.children[0]
		;
		assert.equal( input.value, mDate.format('L ' + format) );
	});

	it( 'timeFormat=false', function(){
		var component = createDatetime({ value: date, timeFormat: false }),
			input = component.children[0],
			view = component.children[1].children[0]
		;
		assert.equal( input.value, mDate.format('L') );
		// The view must be the daypicker
		assert.equal( view.className, 'rdtDays' );
		// There must not be a time toggle
		assert.equal( view.querySelectorAll('.timeToggle').length, 0);
	});

	it( 'viewMode=years', function(){
		var component = createDatetime({ viewMode: 'years' }),
			view = component.children[1].children[0]
		;

		assert.equal( view.className, 'rdtYears' );
	});

	it( 'viewMode=months', function(){
		var component = createDatetime({ viewMode: 'months' }),
			view = component.children[1].children[0]
		;

		assert.equal( view.className, 'rdtMonths' );
	});

	it( 'viewMode=time', function(){
		var component = createDatetime({ viewMode: 'time' }),
			view = component.children[1].children[0]
		;

		assert.equal( view.className, 'rdtTime' );
	});

	it( 'className', function(){
		var component = createDatetime({ className: 'custom' });
		assert.notEqual( component.className.indexOf('custom'), -1 );
	});

	it( 'inputProps', function(){
		var component = createDatetime({ inputProps: { className: 'myInput', type: 'email' } }),
			input = component.children[0]
		;

		assert.equal( input.className, 'myInput' );
		assert.equal( input.type, 'email' );
	});

	it( 'renderDay', function(){
		var props, currentDate, selectedDate,
			component = createDatetime({ value: mDate, renderDay: function( p, current, selected ){
				props = p;
				currentDate = current;
				selectedDate = selected;

				return React.DOM.td( props, 'day' );
			}}),
			view = component.children[1].children[0]
		;

		// Last day should be 6th of february
		assert.equal( currentDate.day(), 6 );
		assert.equal( currentDate.month(), 1 );

		// The date must be the same
		assert.equal( selectedDate.isSame( mDate ), true );

		// There should be a onClick function in the props
		assert.equal( typeof props.onClick, 'function' );

		// The cell text should be 'day'
		assert.equal( view.querySelector('.day').innerHTML, 'day' );
	});


	it( 'renderMonth', function(){
		var props, month, year, selectedDate,
			component = createDatetime({ value: mDate, viewMode: 'months', renderMonth: function( p, m, y, selected ){
				props = p;
				month = m;
				year = y;
				selectedDate = selected;

				return React.DOM.td( props, 'month' );
			}}),
			view = component.children[1].children[0]
		;

		// The date must be the same
		assert.equal( selectedDate.isSame( mDate ), true );

		assert.equal( month, 11 );
		assert.equal( year, 2000 );

		// There should be a onClick function in the props
		assert.equal( typeof props.onClick, 'function' );

		// The cell text should be 'day'
		assert.equal( view.querySelector('.month').innerHTML, 'month' );
	});

	it( 'renderYear', function(){
		var props, year, selectedDate,
			component = createDatetime({ value: mDate, viewMode: 'years', renderYear: function( p, y, selected ){
				props = p;
				year = y;
				selectedDate = selected;

				return React.DOM.td( props, 'year' );
			}}),
			view = component.children[1].children[0]
		;

		// The date must be the same
		assert.equal( selectedDate.isSame( mDate ), true );

		assert.equal( year, 2010 );

		// There should be a onClick function in the props
		assert.equal( typeof props.onClick, 'function' );

		// The cell text should be 'day'
		assert.equal( view.querySelector('.year').innerHTML, 'year' );
	});
});