import React from 'react';
import { shallow, mount } from 'enzyme';
import { ConfigurableItemRowWithoutHOC } from './configurable-item-row.component';
import Checkbox from '../../../__experimental__/components/checkbox';
import CheckboxLegacy from '../../checkbox';
import 'jest-styled-components';
import Icon from '../../icon';
import { WithDrag, WithDrop } from '../../drag-and-drop';
import DraggableContext from '../../drag-and-drop/draggable-context';
import { rootTagTest } from '../../../utils/helpers/tags/tags-specs';
import { ConfigurableItemRowStyle, ConfigurableItemRowIconStyle } from './configurable-item-row.style';
import classicTheme from '../../../style/themes/classic';
import { assertStyleMatch } from '../../../__spec_helper__/test-utils';


describe('ConfigurableItemRow', () => {
  let wrapper;
  const onChange = () => { };

  describe('classNames', () => {
    beforeEach(() => {
      wrapper = shallow(<ConfigurableItemRowWithoutHOC className='my-custom-class-name' rowIndex={ 1 } />);
      wrapper.instance().context = { dragAndDropActiveIndex: 1 };
    });

    it('adds the className to the row', () => {
      expect(wrapper.find('.my-custom-class-name').length).toEqual(1);
    });

    describe('when the dragAndDropActiveIndex is the same as the rowIndex', () => {
      beforeEach(() => {
        wrapper.setProps({ rowIndex: 1 });
      });

      it('adds configurable-item-row--dragged to the classes', () => {
        expect(wrapper.find(ConfigurableItemRowStyle).prop('isDragged')).toEqual(true);
      });
    });

    describe('when the dragAndDropActiveIndex is the same as the rowIndex', () => {
      beforeEach(() => {
        wrapper.setProps({ rowIndex: 2 });
      });
      it('does not add configurable-item-row--dragged to the classes', () => {
        expect(wrapper.find(ConfigurableItemRowStyle).prop('isDragged')).toEqual(false);
      });
    });
  });

  describe('tags', () => {
    describe('on component', () => {
      beforeEach(() => {
        wrapper = shallow(
          <ConfigurableItemRowWithoutHOC
            data-element='bar' data-role='baz'
            rowIndex={ 1 }
          />
        );
      });
      it('includes the correct component, element and role data tags', () => {
        rootTagTest(wrapper, 'configurable-item-row', 'bar', 'baz');
      });
    });
  });

  describe('onChange', () => {
    beforeEach(() => {
      wrapper = shallow(
        <ConfigurableItemRowWithoutHOC
          onChange={ onChange } rowIndex={ 1 }
        />
      );
    });
    it('passes the onChange prop through to the Checkbox onChange prop', () => {
      expect(wrapper.find(Checkbox).props().onChange).toEqual(onChange);
    });

    it('if classicTheme provided, render legacy checkbox component', () => {
      wrapper.setProps({ theme: classicTheme });
      expect(wrapper.find(CheckboxLegacy).props().onChange).toEqual(onChange);
    });
  });

  describe('enabled', () => {
    describe('when the row is enabled', () => {
      beforeEach(() => {
        wrapper = shallow(
          <ConfigurableItemRowWithoutHOC enabled rowIndex={ 1 } />
        );
      });

      it('sets the Checkbox value to true', () => {
        expect(wrapper.find(Checkbox).props().checked).toBeTruthy();
      });
    });

    describe('when the row is not enabled', () => {
      beforeEach(() => {
        wrapper = shallow(
          <ConfigurableItemRowWithoutHOC enabled={ false } rowIndex={ 1 } />
        );
      });

      it('sets the Checkbox value to false', () => {
        expect(wrapper.find(Checkbox).props().value).toBeFalsy();
      });
    });
  });

  describe('locked', () => {
    describe('when the row is locked', () => {
      beforeEach(() => {
        wrapper = shallow(
          <ConfigurableItemRowWithoutHOC locked rowIndex={ 1 } />
        );
      });

      it('sets the Checkbox as disabled', () => {
        expect(wrapper.find(Checkbox).props().disabled).toBeTruthy();
      });
    });

    describe('when the row is not locked', () => {
      beforeEach(() => {
        wrapper = shallow(
          <ConfigurableItemRowWithoutHOC locked={ false } rowIndex={ 1 } />
        );
      });

      it('does not set the Checkbox as disabled', () => {
        expect(wrapper.find(Checkbox).props().disabled).toBeFalsy();
      });
    });
  });

  describe('name', () => {
    beforeEach(() => {
      wrapper = shallow(
        <ConfigurableItemRowWithoutHOC name='Foo' rowIndex={ 1 } />
      );
    });

    it('sets the Checkbox label prop', () => {
      expect(wrapper.find(Checkbox).props().label).toEqual('Foo');
    });
  });

  describe('rowIndex', () => {
    beforeEach(() => {
      wrapper = shallow(
        <ConfigurableItemRowWithoutHOC rowIndex={ 2 } />
      );
    });
    it('sets the index prop on the WithDrop component', () => {
      expect(wrapper.find(WithDrop).props().index).toEqual(2);
    });
  });

  describe('icon', () => {
    beforeEach(() => {
      wrapper = mount(
        <DraggableContext onDrag={ () => {} }>
          <ConfigurableItemRowWithoutHOC name='Foo' rowIndex={ 1 } />
        </DraggableContext>
      );
    });

    it('renders a drag vertical icon wrapped in WithDrag', () => {
      wrapper.update(); // this is required because the _draggableNode ref is initially undefined.
      const withDrag = wrapper.find(WithDrag);
      const row = wrapper.find(ConfigurableItemRowWithoutHOC);
      expect(withDrag.length).toEqual(1);
      expect(withDrag.find(Icon).props().type).toEqual('drag_vertical');
      expect(withDrag.props().draggableNode()).toEqual(row.instance()._listItem);
    });
  });

  describe('list item markup', () => {
    beforeEach(() => {
      wrapper = shallow(
        <ConfigurableItemRowWithoutHOC name='Foo' rowIndex={ 1 } />
      );
    });

    it('renders an <li> wrapped in WithDrop', () => {
      const withDrop = wrapper.find(WithDrop);
      expect(withDrop.length).toEqual(1);
      expect(withDrop.find('[data-element="configurable-item-row"]').length).toEqual(1);
    });
  });
});

describe('ConfigurableItemRowIconStyle', () => {
  describe('when classic theme is provided to the component', () => {
    it('should render correct styles', () => {
      assertStyleMatch({
        paddingRight: '0'
      }, mount(<ConfigurableItemRowIconStyle type='drag_vertical' theme={ classicTheme } />));
    });
  });
});

describe('ConfigurableItemRowStyle', () => {
  describe('when classic theme is provided to the component', () => {
    it('should render correct styles', () => {
      assertStyleMatch({
        borderBottom: '1px solid #CCD6DA',
        padding: '0.5em 0.5em 0.7em'
      }, mount(<ConfigurableItemRowStyle theme={ classicTheme } />));
    });
  });

  describe('when isDragged is provided to the component', () => {
    it('should render correct styles', () => {
      assertStyleMatch({
        cursor: '-webkit-grabbing'
      }, mount(<ConfigurableItemRowStyle theme={ classicTheme } isDragged />));
    });
  });

  describe('when isDragging is provided to the component', () => {
    it('should render correct styles', () => {
      assertStyleMatch({
        cursor: '-webkit-grabbing'
      }, mount(<ConfigurableItemRowStyle theme={ classicTheme } isDragging />));
    });
  });
});

@@ -3242,39 +3242,37 @@
 ().checked).toBe
-Truthy(
+(true
 );%0A      %7D);%0A   
@@ -3583,25 +3583,27 @@
 s().
-value
+checked
 ).toBe
-Falsy(
+(false
 );%0A 

fix testing