import { GlEmptyState, GlTooltip, GlTruncate } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import TokenTable from '~/clusters/agents/components/token_table.vue';
import CreateTokenButton from '~/clusters/agents/components/create_token_button.vue';
import { useFakeDate } from 'helpers/fake_date';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { MAX_LIST_COUNT } from '~/clusters/agents/constants';

describe('ClusterAgentTokenTable', () => {
  let wrapper;
  useFakeDate([2021, 2, 15]);

  const defaultTokens = [
    {
      id: '1',
      createdAt: '2021-02-13T00:00:00Z',
      description: 'Description of token 1',
      createdByUser: {
        name: 'user-1',
      },
      lastUsedAt: '2021-02-13T00:00:00Z',
      name: 'token-1',
    },
    {
      id: '2',
      createdAt: '2021-02-10T00:00:00Z',
      description: null,
      createdByUser: null,
      lastUsedAt: null,
      name: 'token-2',
    },
  ];
  const clusterAgentId = 'cluster-agent-id';
  const cursor = {
    first: MAX_LIST_COUNT,
    last: null,
  };

  const provide = {
    agentName: 'cluster-agent',
    projectPath: 'path/to/project',
    canAdminCluster: true,
  };

  const createComponent = (tokens) => {
    wrapper = extendedWrapper(
      mount(TokenTable, { propsData: { tokens, clusterAgentId, cursor }, provide }),
    );
  };

  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
  const findCreateTokenBtn = () => wrapper.findComponent(CreateTokenButton);

  beforeEach(() => {
    return createComponent(defaultTokens);
  });

  afterEach(() => {
    wrapper.destroy();
  });

  it('displays the create token button', () => {
    expect(findCreateTokenBtn().exists()).toBe(true);
  });

  it('passes the correct params to the create token component', () => {
    expect(findCreateTokenBtn().props()).toMatchObject({
      clusterAgentId,
      cursor,
    });
  });

  it.each`
    name         | lineNumber
    ${'token-1'} | ${0}
    ${'token-2'} | ${1}
  `('displays token name "$name" for line "$lineNumber"', ({ name, lineNumber }) => {
    const tokens = wrapper.findAllByTestId('agent-token-name');
    const token = tokens.at(lineNumber);

    expect(token.text()).toBe(name);
  });

  it.each`
    lastContactText | lineNumber
    ${'2 days ago'} | ${0}
    ${'Never'}      | ${1}
  `(
    'displays last contact information "$lastContactText" for line "$lineNumber"',
    ({ lastContactText, lineNumber }) => {
      const tokens = wrapper.findAllByTestId('agent-token-used');
      const token = tokens.at(lineNumber);

      expect(token.text()).toBe(lastContactText);
    },
  );

  it.each`
    createdText     | lineNumber
    ${'2 days ago'} | ${0}
    ${'5 days ago'} | ${1}
  `(
    'displays created information "$createdText" for line "$lineNumber"',
    ({ createdText, lineNumber }) => {
      const tokens = wrapper.findAllByTestId('agent-token-created-time');
      const token = tokens.at(lineNumber);

      expect(token.text()).toBe(createdText);
    },
  );

  it.each`
    createdBy         | lineNumber
    ${'user-1'}       | ${0}
    ${'Unknown user'} | ${1}
  `(
    'displays creator information "$createdBy" for line "$lineNumber"',
    ({ createdBy, lineNumber }) => {
      const tokens = wrapper.findAllByTestId('agent-token-created-user');
      const token = tokens.at(lineNumber);

      expect(token.text()).toBe(createdBy);
    },
  );

  it.each`
    description                 | truncatesText | hasTooltip | lineNumber
    ${'Description of token 1'} | ${true}       | ${true}    | ${0}
    ${''}                       | ${false}      | ${false}   | ${1}
  `(
    'displays description information "$description" for line "$lineNumber"',
    ({ description, truncatesText, hasTooltip, lineNumber }) => {
      const tokens = wrapper.findAllByTestId('agent-token-description');
      const token = tokens.at(lineNumber);

      expect(token.text()).toContain(description);
      expect(token.find(GlTruncate).exists()).toBe(truncatesText);
      expect(token.find(GlTooltip).exists()).toBe(hasTooltip);
    },
  );

  describe('when there are no tokens', () => {
    beforeEach(() => {
      return createComponent([]);
    });

    it('displays an empty state', () => {
      const emptyState = findEmptyState();

      expect(emptyState.exists()).toBe(true);
      expect(emptyState.text()).toContain(TokenTable.i18n.noTokens);
    });
  });
});