import { GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { useLocalStorageSpy } from 'helpers/local_storage_helper';
import axios from '~/lib/utils/axios_utils';
import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue';
import EditMetaModal from '~/static_site_editor/components/edit_meta_modal.vue';
import { MR_META_LOCAL_STORAGE_KEY } from '~/static_site_editor/constants';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import {
  sourcePath,
  mergeRequestMeta,
  mergeRequestTemplates,
  project as namespaceProject,
} from '../mock_data';

describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
  useLocalStorageSpy();

  let wrapper;
  let mockAxios;
  const { title, description } = mergeRequestMeta;
  const [namespace, project] = namespaceProject.split('/');

  const buildWrapper = (propsData = {}, data = {}) => {
    wrapper = shallowMount(EditMetaModal, {
      propsData: {
        sourcePath,
        namespace,
        project,
        ...propsData,
      },
      data: () => data,
    });
  };

  const buildMockAxios = () => {
    mockAxios = new MockAdapter(axios);
    const templatesMergeRequestsPath = `templates/merge_request`;
    mockAxios
      .onGet(`${namespace}/${project}/${templatesMergeRequestsPath}`)
      .reply(200, mergeRequestTemplates);
  };

  const buildMockRefs = () => {
    wrapper.vm.$refs.editMetaControls = { resetCachedEditable: jest.fn() };
  };

  const findGlModal = () => wrapper.find(GlModal);
  const findEditMetaControls = () => wrapper.find(EditMetaControls);
  const findLocalStorageSync = () => wrapper.find(LocalStorageSync);

  beforeEach(() => {
    localStorage.setItem(MR_META_LOCAL_STORAGE_KEY);

    buildMockAxios();
    buildWrapper();
    buildMockRefs();

    return wrapper.vm.$nextTick();
  });

  afterEach(() => {
    mockAxios.restore();

    wrapper.destroy();
    wrapper = null;
  });

  it('initializes initial merge request meta with local storage data', async () => {
    const localStorageMeta = {
      title: 'stored title',
      description: 'stored description',
      templates: null,
      currentTemplate: null,
    };

    findLocalStorageSync().vm.$emit('input', localStorageMeta);

    await wrapper.vm.$nextTick();

    expect(findEditMetaControls().props()).toEqual(localStorageMeta);
  });

  it('renders the modal', () => {
    expect(findGlModal().exists()).toBe(true);
  });

  it('renders the edit meta controls', () => {
    expect(findEditMetaControls().exists()).toBe(true);
  });

  it('contains the sourcePath in the title', () => {
    expect(findEditMetaControls().props('title')).toContain(sourcePath);
  });

  it('forwards the title prop', () => {
    expect(findEditMetaControls().props('title')).toBe(title);
  });

  it('forwards the description prop', () => {
    expect(findEditMetaControls().props('description')).toBe(description);
  });

  it('forwards the templates prop', () => {
    expect(findEditMetaControls().props('templates')).toBe(null);
  });

  it('forwards the currentTemplate prop', () => {
    expect(findEditMetaControls().props('currentTemplate')).toBe(null);
  });

  describe('when save button is clicked', () => {
    beforeEach(() => {
      findGlModal().vm.$emit('primary', mergeRequestMeta);
    });

    it('removes merge request meta from local storage', () => {
      expect(findLocalStorageSync().props().clear).toBe(true);
    });

    it('emits the primary event with mergeRequestMeta', () => {
      expect(wrapper.emitted('primary')).toEqual([[mergeRequestMeta]]);
    });
  });

  describe('when templates exist', () => {
    const template1 = mergeRequestTemplates[0];

    beforeEach(() => {
      buildWrapper({}, { templates: mergeRequestTemplates, currentTemplate: null });
    });

    it('sets the currentTemplate on the changeTemplate event', async () => {
      findEditMetaControls().vm.$emit('changeTemplate', template1);

      await wrapper.vm.$nextTick();

      expect(findEditMetaControls().props().currentTemplate).toBe(template1);

      findEditMetaControls().vm.$emit('changeTemplate', null);

      await wrapper.vm.$nextTick();

      expect(findEditMetaControls().props().currentTemplate).toBe(null);
    });

    it('updates the description on the changeTemplate event', async () => {
      findEditMetaControls().vm.$emit('changeTemplate', template1);

      await wrapper.vm.$nextTick();

      expect(findEditMetaControls().props().description).toEqual(template1.content);
    });
  });

  it('emits the hide event', () => {
    findGlModal().vm.$emit('hide');
    expect(wrapper.emitted('hide')).toEqual([[]]);
  });

  it('stores merge request meta changes in local storage when changes happen', async () => {
    const newMeta = { title: 'new title', description: 'new description' };

    findEditMetaControls().vm.$emit('updateSettings', newMeta);

    await wrapper.vm.$nextTick();

    expect(findLocalStorageSync().props('value')).toEqual(newMeta);
  });
});