import { module, test } from 'qunit';
import { setupRenderingTest } from 'marco/tests/helpers';
import { render, click } from '@ember/test-helpers';
import ContributionPhoto from 'marco/components/contribution-photo';

function noop() {}

module('Integration | Component | contribution-photo', function (hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function () {
    this.noop = noop;
  });

  test('it renders the place name and thumbnail', async function (assert) {
    this.item = {
      type: 'photo',
      placeIdentifier: 'osm:node:12345',
      osmType: 'node',
      osmId: '12345',
      placeName: 'Café Example',
      placeNameLoading: false,
      createdAt: Math.floor(Date.now() / 1000) - 60 * 60,
      photos: [
        {
          url: 'https://x.com/photo.jpg',
          thumbUrl: 'https://x.com/thumb.jpg',
          alt: 'A nice café',
          tags: ['food'],
        },
      ],
    };

    await render(
      <template>
        <ContributionPhoto @item={{this.item}} @onSelect={{this.noop}} />
      </template>
    );

    assert.dom('.contribution-place').hasText('Café Example');
    assert
      .dom('.contribution-thumb img')
      .hasAttribute('src', 'https://x.com/thumb.jpg');
    assert.dom('.contribution-tag').hasText('food');
    assert.dom('.contribution-thumb-badge').doesNotExist();
  });

  test('it shows a +N badge when there are multiple photos', async function (assert) {
    this.item = {
      type: 'photo',
      placeIdentifier: 'osm:node:12345',
      osmType: 'node',
      osmId: '12345',
      placeName: 'Park',
      placeNameLoading: false,
      createdAt: 1000,
      photos: [
        {
          url: 'https://x.com/1.jpg',
          thumbUrl: 'https://x.com/t1.jpg',
          tags: [],
        },
        {
          url: 'https://x.com/2.jpg',
          thumbUrl: 'https://x.com/t2.jpg',
          tags: [],
        },
        {
          url: 'https://x.com/3.jpg',
          thumbUrl: 'https://x.com/t3.jpg',
          tags: [],
        },
      ],
    };

    await render(
      <template>
        <ContributionPhoto @item={{this.item}} @onSelect={{this.noop}} />
      </template>
    );

    assert.dom('.contribution-thumb-badge').hasText('+2');
  });

  test('it shows a loading label when placeNameLoading is true', async function (assert) {
    this.item = {
      type: 'photo',
      placeIdentifier: 'osm:node:12345',
      osmType: 'node',
      osmId: '12345',
      placeName: null,
      placeNameLoading: true,
      createdAt: 1000,
      photos: [
        {
          url: 'https://x.com/1.jpg',
          thumbUrl: 'https://x.com/t1.jpg',
          tags: [],
        },
      ],
    };

    await render(
      <template>
        <ContributionPhoto @item={{this.item}} @onSelect={{this.noop}} />
      </template>
    );

    assert.dom('.contribution-name-loading').hasText('Loading…');
  });

  test('clicking the item fires @onSelect with the item', async function (assert) {
    this.item = {
      type: 'photo',
      placeIdentifier: 'osm:node:12345',
      osmType: 'node',
      osmId: '12345',
      placeName: 'Test',
      placeNameLoading: false,
      createdAt: 1000,
      photos: [
        {
          url: 'https://x.com/1.jpg',
          thumbUrl: 'https://x.com/t1.jpg',
          tags: [],
        },
      ],
    };

    let selected = null;
    this.handleSelect = (item) => {
      selected = item;
    };

    await render(
      <template>
        <ContributionPhoto
          @item={{this.item}}
          @onSelect={{this.handleSelect}}
        />
      </template>
    );

    await click('.contribution-item');

    assert.strictEqual(selected, this.item);
  });
});