import React from 'react';
import { shallow, render, mount } from 'enzyme';
import sinon from 'sinon';
import isEqual from 'lodash/isEqual';
import Tag, { TagGroup } from '../src';
import randomText from '../docs/util/randomText';
import TagUncontroledGroupDemo from './TagUncontroledGroupDemo';

const setup = (props) => {
  const wrapper = shallow(<TagGroup {...props} />);
  const staticRender = render(<TagGroup {...props} />);
  const fullRender = mount(<TagGroup {...props} />);
  return {
    props,
    wrapper,
    staticRender,
    fullRender
  };
};

const getTags = length => Array.from(new Array(length)).map(() => `标签${randomText()}`);

describe('TagGroup Test', () => {
  it('Basic Test', () => {
    const length = 5;
    const { wrapper } = setup({ tags: getTags(length) });
    // 渲染5个 tag
    expect(wrapper.find('Tag').length).toBe(length);
    // 新建按钮
    expect(wrapper.find('CreateButton').exists()).toBe(true);
  });

  it('Added A Tag', () => {
    const length = 5;
    const { fullRender } = setup({ tags: getTags(length) });
    fullRender.find('.rs-tag-create-button').simulate('click');
    const input = fullRender.find('.rs-tag-create-button-input');
    input.simulate('change', { target: { value: 'New Tag' } });
    input.simulate('blur');
    expect(fullRender.render().find('.rs-tag').length).toBe(length + 1);
  });

  it('ButtonConfig Test', () => {
    const buttonConfig = {
      text: 'new tag',
      inputMaxLength: 20,
      style: {
        width: '100px'
      }
    };
    const { fullRender } = setup({
      button: buttonConfig
    });
    const buttonWrapper = fullRender.find('.rs-tag-create-button');
    expect(buttonWrapper.text()).toBe(buttonConfig.text);
    buttonWrapper.simulate('click');
    expect(fullRender.find('.rs-tag-create-button-input').get(0).maxLength).toBe(buttonConfig.inputMaxLength);
    expect(isEqual(
      fullRender.find('.rs-tag-create-button-wrap').get(0).style._values,
      buttonConfig.style
    )).toBe(true);
  });

  it('Should get Tags', () => {
    const tags = getTags(10);
    const { fullRender } = setup({
      editEnable: false,
      tags,
      ref: 'tagGroup'
    });
    expect(isEqual(fullRender.node.getTags(), tags)).toBe(true);
  });

  it('Should edit disabled', () => {
    const { fullRender } = setup({
      editEnable: false,
      tags: getTags(1)
    });
    expect(fullRender.find('.icon-close2').length).toBe(0);
    expect(fullRender.find('.rs-tag-create-button-wrap').exists()).toBe(false);
  });

  it('Should create disabled', () => {
    const { fullRender } = setup({
      createEnable: false,
      tags: getTags(1)
    });
    expect(fullRender.find('.icon-close2').length > 0).toBe(true);
    expect(fullRender.find('.rs-tag-create-button-wrap').exists()).toBe(false);
  });

  it('onTagClose&onTagAfterClose should be called', (done) => {
    const onTagClose = sinon.spy();
    const onTagAfterClose = sinon.spy();
    const { fullRender } = setup({
      tags: getTags(1),
      onTagClose,
      onTagAfterClose
    });
    fullRender.find('.icon-close2').simulate('click');
    expect(onTagClose.calledOnce).toBe(true);
    setTimeout(() => {
      expect(onTagAfterClose.calledOnce).toBe(true);
      done();
    }, 3e2);
  });

  it('Uncontroled TagGroup should be render', () => {
    const fullRender = mount(<TagUncontroledGroupDemo />);
    expect(fullRender.find('.rs-tag-closeable').length, fullRender.state('tags').length);
    Object.keys(Tag.Color).forEach((color) => {
      expect(fullRender.find(`.rs-tag.rs-tag-${color.toLowerCase()}`).exists()).toBe(true);
    });
  });

  it('Added tag to Uncontroled TagGroup', () => {
    const fullRender = mount(<TagUncontroledGroupDemo />);
    const originTagsNums = fullRender.state('tags').length;
    fullRender.find('.rs-tag-create-button').simulate('click');
    const input = fullRender.find('.rs-tag-create-button-input');
    input.simulate('change', { target: { value: 'New Tag' } });
    input.simulate('blur');
    expect(fullRender.state('tags').length).toBe(originTagsNums + 1);
  });
});
