import { Component, Injectable } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { OhayoThemeModule } from '../../theme.module';
import { OhayoI18NService, OhayoI18NServiceFake, OHAYO_I18N_TOKEN } from './i18n';

describe('theme: i18n', () => {
  const i18n = new OhayoI18NServiceFake();

  it('#use', () => {
    i18n.use('zh-CN');
    expect(true).toBeTruthy();
  });

  it('#getLangs', () => {
    expect(i18n.getLangs().length).toBe(0);
  });

  it('#fanyi', () => {
    expect(i18n.fanyi('index')).toBe('index');
  });

  describe('[i18n pipe]', () => {
    let fixture: ComponentFixture<TestComponent>;
    let srv: OhayoI18NService;

    @Injectable()
    class MockI18NService extends OhayoI18NServiceFake {
      data: any = {};
      use(_lang: string): void {
        this.data = {
          simple: 'a',
          param: 'a-{{value}}',
          html: '<i>asdf</i>',
        };
      }
      fanyi(key: string, data?: { [key: string]: string }, _isSafe?: boolean): string {
        let res = this.data[key] || '';
        if (data) {
          Object.keys(data).forEach(k => (res = res.replace(new RegExp(`{{${k}}}`, 'g'), data[k])));
        }
        return res;
      }
    }

    function genModule(): void {
      TestBed.configureTestingModule({
        imports: [OhayoThemeModule.forRoot()],
        declarations: [TestComponent],
        providers: [
          {
            provide: OHAYO_I18N_TOKEN,
            useClass: MockI18NService,
            multi: false,
          },
        ],
      });
      fixture = TestBed.createComponent(TestComponent);
      srv = fixture.debugElement.injector.get(OHAYO_I18N_TOKEN);
      srv.use('en');
      fixture.detectChanges();
    }

    function check(result: string, id: string = 'simple'): void {
      const el = fixture.debugElement.query(By.css('#' + id)).nativeElement as HTMLElement;

      expect(el.textContent!.trim()).toBe(result);
    }

    it('should working', () => {
      genModule();
      check('a');
    });

    it('should be param', () => {
      genModule();
      fixture.componentInstance.key = 'param';
      fixture.componentInstance.params = { value: '1' };
      fixture.detectChanges();
      check('a-1', 'param');
    });

    it('should be safeHtml', () => {
      genModule();
      fixture.componentInstance.key = 'html';
      fixture.componentInstance.params = { value: '1' };
      fixture.componentInstance.isSafe = true;
      fixture.detectChanges();
      check('asdf', 'html');
    });
  });
});

@Component({
  template: `
    <div id="simple">{{ key | i18n }}</div>
    <div id="param">{{ key | i18n: params }}</div>
    <div id="html" [innerHTML]="key | i18n: params:isSafe"></div>
  `,
})
class TestComponent {
  key = 'simple';
  params = {};
  isSafe = true;
}