import { shallow, mount } from 'enzyme';
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete, Address } from 'web-foundation';
import { BestCase as GoogleGeocode } from '../data/google-geocode';

describe('<AutoComplete />', function() {
    it('should render', function() {
        const wrapper = shallow(<AutoComplete />);

        expect(wrapper.hasClass('auto-complete')).to.be.true;
        expect(wrapper.find('label')).to.have.length(0);
        expect(wrapper.find('input')).to.have.length(1);
    });

    it('should handle ui labels', function() {
        const wrapper = shallow(
            <AutoComplete
                placeholder="beans"
                label="hashtag" />
        );

        expect(wrapper.find('label')).to.have.length(1);
        expect(wrapper.find('label').text())
            .to.equal('hashtag');
        expect(wrapper.find('input').prop('placeholder'))
            .to.equal('beans');
    });

    it('should return an Address.Model on match', function() {
        const spyOne = sinon.spy(),
            spyTwo = sinon.spy(),
            wrapper = shallow(
                <AutoComplete
                    match={ spyOne }
                    update={ spyTwo } />
            );

        wrapper.instance().processChange({
            getPlace() {
                return GoogleGeocode;
            }
        });

        wrapper.instance().update({
            target: {
                value: 'beans'
            }
        });

        expect(spyOne.callCount).to.equal(1);
        expect(spyOne.getCall(0).args[0]).instanceof(Address.Model);

        expect(spyTwo.callCount).to.equal(2);
        expect(spyTwo.getCall(0).args[0])
            .to.equal('475 Valencia St');
        expect(spyTwo.getCall(1).args[0])
            .to.equal('beans');
    });

    it('should receive new values', function() {
        const wrapper = mount(
                <AutoComplete
                    value="beans" />
            ),
            node = ReactDOM.findDOMNode(wrapper.instance());

        expect(node.getElementsByTagName('input')[0].value).to.equal('beans');

        wrapper.setProps({
            value: 'yolo'
        });

        expect(node.getElementsByTagName('input')[0].value).to.equal('yolo');
    });

    it('should connect to el gooj', function() {
        const eventSpy = sinon.spy(),
            autoSpy = sinon.spy();

        window.google = {
            maps: {
                event: {
                    addListener: eventSpy
                },
                places: {
                    Autocomplete: autoSpy
                }
            }
        };

        const wrapper = mount(<AutoComplete />),
            node = ReactDOM.findDOMNode(wrapper.instance());

        expect(autoSpy.callCount).to.equal(1);
        expect(autoSpy.getCall(0).args[0])
            .to.equal(node.getElementsByTagName('input')[0]);

        expect(eventSpy.callCount).to.equal(1);
        expect(eventSpy.getCall(0).args[1]).to.equal('place_changed');
    });

    it('should acknowledge an error through props', function() {
        const wrapper = shallow(<AutoComplete error="error message" />);

        expect(wrapper.hasClass('has-error')).to.be.true;
    });

    it('should show the alt placeholder on focus', function() {
        const wrapper = shallow(
            <AutoComplete
                placeholder="placeholder"
                altPlaceholder="alt" />);

        expect(wrapper.find('input').prop('placeholder'))
            .to.equal('placeholder');

        wrapper.find('input').simulate('focus');

        expect(wrapper.find('input').prop('placeholder'))
            .to.equal('alt');

        wrapper.find('input').simulate('blur');

        expect(wrapper.find('input').prop('placeholder'))
            .to.equal('placeholder');
    });
});
