import React from 'react';
import { mount } from 'enzyme';
import { FilterItem } from 'karmadata';
import renderer from 'react-test-renderer';
import moment from 'moment';

import KdSelectNumber from '../../components/KdSelectNumber';
import karmadataTheme from '../../themes/karmadata.scss';
import { chicklets, events, autoCompleteOptions } from '../__utils';

const defaultOptions = [
  {
    label: '1',
    operator: 'Eq',
    values: [1],
  },
  {
    label: '2',
    operator: 'Eq',
    values: [2],
  },
  {
    label: '3',
    operator: 'Eq',
    values: [4],
  },
];



const optionValues = {
  anyOption: { visible: true },
  equalToOption: { visible: true },
  noEqualToOption: { visible: true },
  greaterThanOption: { visible: true },
  greaterThanOrEqualToOption: { visible: true },
  lessThanOption: { visible: true },
  lessThanOrEqualToOption: { visible: true },
  betweenOption: { visible: true },
  noneOption: { visible: false },
  moreThanZeroOption: { visible: false },
  customOptions: defaultOptions,
};

const mainSelectorOptions = {
  visible: true,
  selected: 'anyOption',
  optionValues,
};

const props = {
  mainSelector: mainSelectorOptions,
  autoComplete: autoCompleteOptions,
  events,
  chicklets,
};

describe('KdSelectNumber', () => {
  let mainSelector;
  let kdFilterModel;
  let initialValues;
  beforeEach(() => {
    mainSelector = mainSelectorOptions;
    kdFilterModel = FilterItem('KdDrugRxNorm', 'DrugScheduleDEA', 'Number', 'Eq', [20]);
    initialValues = kdFilterModel.getSelected();
  });
  describe('Setup', () => {
    it('renders correctly', () => {
      const tree = renderer.create(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...props}
        />
      ).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('should set initialValues', () => {
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...props}
        />);
      expect(wrapper.node.getChicklets().length).toBe(initialValues.length);
      expect(kdFilterModel.getSelected().length).toBe(initialValues.length);
    });
  });

  describe('ANY Option', () => {
    it('Visible', () => {
      mainSelector.optionValues.anyOption.visible = true;
      const customProps = { ...props, mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.find(`option[value="defaultAny"]`).length).toBe(1);
    });

    it('On select clear values', () => {
      mainSelector.optionValues.anyOption.visible = true;
      const customProps = { ...props, mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.node.getChicklets().length).toBe(initialValues.length);
      wrapper.find('select').simulate('change', { target: { value: 'defaultAny' } });
      expect(wrapper.node.getChicklets().length).toBe(0);
      expect(kdFilterModel.getSelected().length).toBe(0);
    });
  });

  describe('After Option - Gt', () => {
    it('Visible', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      const customProps = { ...props, mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.find('option[value="defaultGt"]').length).toBe(1);
    });

    it('Select shows input', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      const customProps = { ...props, mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={FilterItem('KdDrugRxNorm', 'DrugScheduleDEA', 'Number')}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.find('option[value="defaultGt"]').length).toBe(1);
      expect(wrapper.find('.c-kd__input').length).toBe(0);
      wrapper.find('select').simulate('change', { target: { value: 'defaultGt' } });
      expect(wrapper.find('.c-kd__input').length).toBe(1);
    });

    it('Select and add a value', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      const customProps = { ...props, selectBehavior: 'AddChickletSingle', mainSelector };
      const model = FilterItem('KdDrugRxNorm', 'DrugScheduleDEA', 'Number');
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={model}
          theme={karmadataTheme}
          {...customProps}
        />);
      wrapper.find('select').simulate('change', { target: { value: 'defaultLt' } });
      const input = wrapper.find('.c-kd__input');
      input.simulate('change', { target: { value: '1' } });
      const kdChicklets = wrapper.node.getChicklets().map(v => v.value);
      expect(kdChicklets.includes('1')).toBe(true);
      expect(kdChicklets.length).toBe(1);
      expect(model.getSelected().includes(1)).toBe(true);
      expect(wrapper.find('.c-kd-item-selected-text').length).toBe(1);
      expect(wrapper.find('.c-kd-item-selected').length).toBe(1);
    });

    it('Remove Item', () => {
      const customProps = { ...props, selectBehavior: 'AddChicklet', mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      wrapper.find('.o-remove').simulate('click');
      expect(wrapper.node.getChicklets().length).toBe(initialValues.length - 1);
    });
  });

  describe('Behavior', () => {
    it('None behavior', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      const customProps = { ...props, selectBehavior: 'None', mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />);
      expect(wrapper.find('.c-kd-selected-chicklets--chicklet_none')).not.toBeNull();
      expect(wrapper.find('.c-kd-selected-chicklets--chicklet_none < div').length).toBe(0);

      wrapper.find('select').simulate('change', { target: { value: 'defaultGt' } });
      const input = wrapper.find('.c-kd__input');
      input.simulate('change', { target: { value: '1' } });
      expect(wrapper.find('.c-kd-selected-chicklets--chicklet_none')).not.toBeNull();
      expect(wrapper.find('.c-kd-selected-chicklets--chicklet_none < div').length).toBe(0);
    });

    it('AddChickletSingle', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      mainSelector.optionValues.lessThanOption.visible = true;
      const customProps = { ...props, selectBehavior: 'AddChickletSingle', mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />);
      expect(wrapper.find('.c-kd-selected-chicklets')).not.toBeNull();

      wrapper.find('select').simulate('change', { target: { value: 'defaultGt' } });
      const input = wrapper.find('.c-kd__input');
      input.simulate('change', { target: { value: '1' } });
      expect(wrapper.find('.c-kd-selected-chicklets').children().length).toBe(1);
      expect(wrapper.node.getChicklets().length).toBe(1);

      wrapper.find('select').simulate('change', { target: { value: 'defaultLt' } });
      input.simulate('change', { target: { value: '0' } });
      expect(wrapper.find('.c-kd-selected-chicklets').children().length).toBe(1);
      expect(wrapper.node.getChicklets().length).toBe(1);
    });

    it('disabled', () => {
      const customProps = { ...props, disabled: true };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />
      );
      expect(wrapper.find('.u-disabled')).not.toBeNull();
    });
  });

  describe('validation', () => {
    it('min max', () => {
      const customProps = { ...props, selectedValuesInitial: [], min: 10, max: 20 };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />
      );

      wrapper.find('select').simulate('change', { target: { value: 'defaultEq' } });
      const input = wrapper.find('.c-kd__input');
      input.simulate('change', { target: { value: '15' } });

      expect(wrapper.node.getChicklets()[0].value).toBe('15');

      input.simulate('change', { target: { value: '5' } });
      expect(wrapper.node.getChicklets().length).toBe(0);

      input.simulate('change', { target: { value: '25' } });
      expect(wrapper.node.getChicklets().length).toBe(0);
    });

    it('percentage', () => {
      const customProps = { ...props, selectedValuesInitial: [], type: 'percentage' };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />
      );

      wrapper.find('select').simulate('change', { target: { value: 'defaultEq' } });
      const input = wrapper.find('.c-kd__input');
      input.simulate('change', { target: { value: '15' } });

      expect(wrapper.find('.c-kd-select-number__unit')).not.toBeNull();
      expect(wrapper.find('.c-kd-select-number__unit').props().children).toBe('%');
    });

  });

  describe('between', () => {
    it('Show option', () => {
      const customProps = { ...props, selectedValuesInitial: [] };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />
      );

      expect(wrapper.find(`option[value="defaultBetween"]`).length).toBe(1);
    });

    it('Render component', () => {
      const customProps = { ...props };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={FilterItem('KdDrugRxNorm', 'DrugScheduleDEA', 'Number')}
          {...customProps}
        />
      );

      wrapper.find('select').simulate('change', { target: { value: 'defaultBetween' } });
      expect(wrapper.find('.c-kd-select-number__slider').length).toBe(1);
    });
  });

  describe('custom options', () => {
    it('visible', () => {
      const customProps = { ...props, selectedValuesInitial: [] };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />
      );

      expect(wrapper.find('option[value="customEq1"]').length).toBe(1);
    });

    it('add chicklet', () => {
      const customProps = { ...props, selectedValuesInitial: [] };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          {...customProps}
        />
      );

      wrapper.find('select').simulate('change', { target: { value: 'customEq1' } });
      expect(wrapper.node.getChicklets()[0].value).toContain(1);
    });
  });
});
