/* eslint-disable react/no-string-refs */

import React, { createFactory } from 'react';

import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import { expect } from 'chai';
import assign from 'lodash.assign';

import SLDSTimepicker from '../../time-picker';
import IconSettings from '../../icon-settings';

const {
	Simulate,
	findRenderedDOMComponentWithTag,
	findRenderedDOMComponentWithClass,
} = TestUtils;

const mockCallback = sinon.spy();

const formatter = (date) =>
	date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
const dateTimeNow = new Date();
const defaultStrValue = formatter(dateTimeNow);

const defaultProps = {
	onDateChange: () => {},
	value: dateTimeNow,
	strValue: defaultStrValue,
};

describe('SLDSTimepicker: ', () => {
	describe('Timepicker Value Prop Change', () => {
		it('displays a modified state upon changing props', () => {
			const futureDateTime = new Date(
				new Date().getTime() + 24 * 60 * 60 * 1000
			);

			const TestTimepicker = createFactory(
				class extends React.Component {
					state = {
						isOpen: false,
						value: futureDateTime,
						strValue: formatter(futureDateTime),
					};

					render() {
						return (
							<IconSettings iconPath="/assets/icons">
								<SLDSTimepicker ref="timePicker" {...defaultProps} />
							</IconSettings>
						);
					}
				}
			);

			const parent = TestUtils.renderIntoDocument(TestTimepicker());
			parent.refs.timePicker.state.strValue.should.eql(defaultStrValue);
		});
	});
});