import React from 'react';
import { render } from '@testing-library/react';
import { MapboxAddressMinimap, Theme } from '@mapbox/search-js-web';
import { Feature, Point } from 'geojson';

import { AddressMinimap } from '../../src';

const THEME: Theme = { variables: { fontFamily: 'Comic Sans MS ' } };
const FEATURE: Feature<Point> = {
  type: 'Feature',
  geometry: {
    type: 'Point',
    coordinates: [0, 0]
  },
  properties: {}
};

describe('AddressMinimap', () => {
  it('renders', () => {
    const { baseElement } = render(
      <form>
        <AddressMinimap accessToken="xyz" theme={THEME} />
      </form>
    );

    const minimap = baseElement.querySelector<MapboxAddressMinimap>(
      'mapbox-address-minimap'
    );
    expect(minimap).toBeTruthy();

    expect(minimap.accessToken).toBe('xyz');
    expect(minimap.theme).toEqual(THEME);
  });

  test('show works as a toggle', () => {
    const { baseElement, rerender } = render(
      <form>
        <AddressMinimap
          accessToken="xyz"
          theme={THEME}
          feature={FEATURE}
          show
        />
      </form>
    );

    const minimap = baseElement.querySelector<MapboxAddressMinimap>(
      'mapbox-address-minimap'
    );
    expect(minimap).toBeTruthy();
    expect(minimap.querySelector('.MapboxAddressMinimap')).toBeTruthy();
    expect(
      minimap.querySelector('.MapboxAddressMinimap').getAttribute('aria-hidden')
    ).not.toBeTruthy();

    rerender(
      <form>
        <AddressMinimap
          accessToken="xyz"
          theme={THEME}
          feature={FEATURE}
          show={false}
        />
      </form>
    );

    expect(minimap.querySelector('.MapboxAddressMinimap')).toBeTruthy();
    expect(
      minimap.querySelector('.MapboxAddressMinimap').getAttribute('aria-hidden')
    ).toBeTruthy();
  });

  test('Custom buttons text', () => {
    const { baseElement, rerender } = render(
      <form>
        <AddressMinimap
          accessToken="xyz"
          theme={THEME}
          feature={FEATURE}
          canAdjustMarker={true}
          footer={false}
          show
        />
      </form>
    );

    const minimap = baseElement.querySelector<MapboxAddressMinimap>(
      'mapbox-address-minimap'
    );

    const adjustBtn = minimap.querySelector('.MinimapButtonAdjust');
    const saveBtn = minimap.querySelector('.MinimapButtonSave');
    const cancelBtn = minimap.querySelector('.MinimapButtonCancel');

    expect(adjustBtn).toHaveTextContent('Adjust pin');
    expect(saveBtn).toHaveTextContent('Save');
    expect(cancelBtn).toHaveTextContent('Cancel');

    rerender(
      <form>
        <AddressMinimap
          accessToken="xyz"
          theme={THEME}
          feature={FEATURE}
          canAdjustMarker={true}
          footer={true}
          adjustBtnText="Stift anpassen"
          saveBtnText="Sparen"
          cancelBtnText="Abbrechen"
          show
        />
      </form>
    );

    expect(adjustBtn).toHaveTextContent('Stift anpassen');
    expect(saveBtn).toHaveTextContent('Sparen');
    expect(cancelBtn).toHaveTextContent('Abbrechen');
  });

  test('Custom footer', () => {
    const { baseElement, rerender } = render(
      <form>
        <AddressMinimap
          accessToken="xyz"
          theme={THEME}
          feature={FEATURE}
          canAdjustMarker={true}
          footer={false}
          show
        />
      </form>
    );

    const minimap = baseElement.querySelector<MapboxAddressMinimap>(
      'mapbox-address-minimap'
    );
    const footerEl = minimap.querySelector('.MinimapFooter');
    expect(footerEl).toHaveAttribute('aria-hidden');

    rerender(
      <form>
        <AddressMinimap
          accessToken="xyz"
          theme={THEME}
          feature={FEATURE}
          canAdjustMarker={true}
          footer={true}
          show
        />
      </form>
    );
    expect(footerEl).not.toHaveAttribute('aria-hidden');

    rerender(
      <form>
        <AddressMinimap
          accessToken="xyz"
          theme={THEME}
          feature={FEATURE}
          canAdjustMarker={true}
          footer={'My custom footer text'}
          show
        />
      </form>
    );
    expect(footerEl).toHaveTextContent('My custom footer text');
  });
});