/* eslint-env jest */
import React from 'react';
import noop from 'lodash/noop';
import mount from 'enzyme/mount';
import render from 'enzyme/render';
import MenuItem from '@material-ui/core/MenuItem';
import TextControlbox from './index';
import ServiceLocator from 'App/ServiceLocator';

const mockedFontsList = [
    {
        identifier: 'Calibri',
        title: 'Calibri',
        value: 'Calibri',
    },
    {
        identifier: 'Arial',
        title: 'Arial',
        value: 'Arial',
    },
    {
        identifier: 'Helvetica',
        title: 'Helvetica',
        value: 'Helvetica',
    },
    {
        identifier: 'Times New Roman',
        title: 'Times New Roman',
        value: 'Times New Roman',
    },
    {
        identifier: 'Roboto',
        title: 'Roboto',
        value: 'Roboto',
    },
    {
        identifier: 'Verdana',
        title: 'Verdana',
        value: 'Verdana',
    },
];

const popupArea = {};

it('renders correctly', () => {
    const tree = render(
        <TextControlbox
            width="lg"
            textValue="Lorem ipsum dolor sit amet, cosectetur adipiscing elit"
            handleChangeText={noop}
            fontValue={mockedFontsList[0]}
            fonts={mockedFontsList}
            handleChangeFont={noop}
            minSize={8}
            maxSize={12}
            fontSizeValue={10}
            onChangeFontSize={noop}
            popupArea={popupArea}
        />
    );
    expect(tree).toMatchSnapshot();
});

it('renders a boxed component with the boxed prop', () => {
    const tree = render(
        <TextControlbox
            width="lg"
            textValue="Lorem ipsum dolor sit amet, cosectetur adipiscing elit"
            handleChangeText={noop}
            fontValue={mockedFontsList[0]}
            fonts={mockedFontsList}
            handleChangeFont={noop}
            minSize={8}
            maxSize={12}
            fontSizeValue={10}
            onChangeFontSize={noop}
            boxed
        />
    );
    expect(tree).toMatchSnapshot();
});

it('calls the handleChangeText callback when the user changes the TextControlbox textfield', () => {
    const onChangeHandler = jest.fn();
    const tree = mount(
        <TextControlbox
            textValue="Lorem ipsum dolor sit amet, cosectetur adipiscing elit"
            handleChangeText={onChangeHandler}
            fontValue={mockedFontsList[0]}
            fonts={mockedFontsList}
            width="lg"
            handleChangeFont={noop}
            minSize={8}
            maxSize={12}
            fontSizeValue={10}
            onChangeFontSize={onChangeHandler}
        />
    );

    const textarea = tree.find('textarea').at(0);
    textarea.simulate('change', { target: { value: 'Lorem' } });
    expect(onChangeHandler).toHaveBeenCalled();
});

it('calls the handleChangeFont callback when the user changes the TextControlbox fontFamily', () => {
    const analyticsSrvc = new (class {
        static serviceName = 'AnalyticsService';
        triggerEvent = jest.fn();
    })();
    ServiceLocator.provide(analyticsSrvc);
    const onChangeHandler = jest.fn();
    const tree = mount(
        <TextControlbox
            width="lg"
            textValue="Lorem ipsum dolor sit amet, cosectetur adipiscing elit"
            handleChangeText={noop}
            fontValue={mockedFontsList[0]}
            fonts={mockedFontsList}
            handleChangeFont={onChangeHandler}
            minSize={8}
            maxSize={12}
            fontSizeValue={10}
            onChangeFontSize={noop}
        />
    );

    const button = tree.find('[role="button"]');
    button.simulate('mousedown', { button: 0 });
    const option = tree.find(MenuItem).at(1);
    option.simulate('click');
    expect(onChangeHandler).toHaveBeenCalled();
});

it('calls the toggleIsBulkName callback on checkbox click', () => {
    const onChangeHandler = jest.fn();
    const tree = mount(
        <TextControlbox
            width="lg"
            textValue="Lorem ipsum dolor sit amet, cosectetur adipiscing elit"
            handleChangeText={noop}
            fontValue={mockedFontsList[0]}
            fonts={mockedFontsList}
            handleChangeFont={noop}
            minSize={8}
            maxSize={12}
            fontSizeValue={10}
            onChangeFontSize={noop}
            isBulkName={false}
            toggleIsBulkName={onChangeHandler}
            isActiveBulkName={true}
        />
    );

    const checkbox = tree.find('input[type="checkbox"]');
    checkbox.simulate('change', {});
    expect(onChangeHandler).toHaveBeenCalled();
});

it('checkbox should be checked if property isBulkName is true', () => {
    const tree = mount(
        <TextControlbox
            width="lg"
            textValue="Lorem ipsum dolor sit amet, cosectetur adipiscing elit"
            handleChangeText={noop}
            fontValue={mockedFontsList[0]}
            fonts={mockedFontsList}
            handleChangeFont={noop}
            minSize={8}
            maxSize={12}
            fontSizeValue={10}
            onChangeFontSize={noop}
            isBulkName={true}
            toggleIsBulkName={noop}
            isActiveBulkName={true}
        />
    );

    const checkbox = tree.find('input[type="checkbox"]');
    expect(checkbox.props().checked).toBeTruthy();
});
