// src/environments/environment.ts

export const environment = {
  local: true,
  staging: false,
  production: false,
};

// src/environments/environment.staging.ts
// ※このファイルは存在しないので新規作成する

export const environment = {
  local: false,
  staging: true,
  production: false,
};

// src/environments/environment.prod.ts

export const environment = {
  local: false,
  staging: false,
  production: true,
};

// src/app/links/staging-link.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-staging-link',
  template: `<a routerLink="/staging">Staging</a>`,
})
export class StagingLinkComponent {}

// src/app/fakes/fake-staging-link.component.ts
// ① ファイルを新規作成する

import { Component } from '@angular/core';

@Component({
  // ② 本物と同じセレクタ
  selector: 'app-staging-link',
  template: ``,
})
export class FakeStagingLinkComponent {
  // ③ 本物に @Input() があれば同じように記述
}

// src/app/fakes/fake-prod-link.component.ts
// ① ファイルを新規作成する

import { Component } from '@angular/core';

@Component({
  // ② 本物と同じセレクタ
  selector: 'app-prod-link',
  template: ``,
})
export class FakeProdLinkComponent {
  // ③ 本物に @Input() があれば同じように記述
}

// src/app/app.module.ts

import { StagingLinkComponent } from "src/app/links/staging-link.component";
import { ProdLinkComponent } from "src/app/links/prod-link.component";

@NgModule({
  declarations: [
    ...
    StagingLinkComponent,
    ProdLinkComponent,
  ],
  imports: [ ... ],
})
export class AppModule { }

// src/app/guards/staging-guard.ts
// 新規に追加するファイル

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { environment } from 'src/environments/environment';

@Injectable()
export class StagingGuard implements CanActivate {
  canActivate(): boolean {
    return environment.local;
  }
}

// src/app/guards/prod-guard.ts
// 新規に追加するファイル

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { environment } from 'src/environments/environment';

@Injectable()
export class ProdGuard implements CanActivate {
  canActivate(): boolean {
    return environment.local || environment.staging;
  }
}

// src/app/app-routing.module.ts

import { ProdGuard } from 'src/app/guards/prod-guard';
import { StagingGuard } from 'src/app/guards/staging-guard';

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: HomePageComponent,
      },
      {
        path: 'staging',
        component: StagingPageComponent,
        // ① ガードを追加
        canActivate: [StagingGuard],
      },
      {
        path: 'production',
        component: ProductionPageComponent,
        // ② ガードを追加
        canActivate: [ProdGuard]
      },
    ],
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// src/app/services/profile-repository.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as Rx from 'rxjs';

@Injectable()
export class ProfileRepository {
  constructor(private http: HttpClient) {}

  get(): Rx.Observable<Profile> {
    return this.http.get<Profile>(`/api/profile`);
  }
}

export interface Profile {
  name: string;
  email: string;
}

// src/app/app.component.ts

import { Profile, ProfileRepository } from 'src/app/services/profile-repository';

@Component({
  selector: 'app-root',
  // プロファイルを表示している
  template: `
    <p>ようこそ {{profile.name}} さん</p>
    ...
  `,
})
export class AppComponent implements OnInit {
  profile: Profile;

  // サービスに依存している
  constructor(
    private repository: ProfileRepository
  ) {}

  ngOnInit(): void {
    // サービスを利用してプロファイルを取得している
    this.repository.get().subscribe(profile =>
      this.profile = profile
    );
  }
}

// src/app/fakes/fake-profile-repository.ts
// 新規に追加するファイル

import { Injectable } from '@angular/core';
import { Profile } from 'src/app/services/profile-repository';
import * as Rx from 'rxjs';

@Injectable()
export class FakeProfileRepository {
  get(): Rx.Observable<Profile> {
    return Rx.of({
      name: '影武者',
      email: 'dummy@example.com',
    });
  }
}

// src/app/fakes/fake-profile-repository.ts

@Injectable()
export class FakeProfileRepository {
  // ① 本物をインジェクト
  constructor(
    private delegate: ProfileRepository
  ) {}

  // ② 実装完了のエンドポイントは本物に委譲
  delete = () => this.delegate.delete();
  update = (profile: Profile) => this.delegate.update(profile);

  // ③ 未実装のエンドポイントはダミーデータを返す
  get(): Rx.Observable<string> {
    return Rx.of('おいら影武者ッス');
  }
}

// src/app/app.module.ts

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    // ① 設定を追加する
    {
      provide: ProfileRepository,
      useFactory: (http) => {
        // ローカル開発環境は本物のサービス
        if (environment.local) {
          return new ProfileRepository(http);
        }

        // ステージング・本番サーバーは影武者サービス
        return new FakeProfileRepository();
      },
      deps: [HttpClient],
    },
  ],
  ...
})
export class AppModule { }

// package.json
"scripts": {
  // ① ローカル PC でそれぞれの環境をデバッグするためのコマンド
  "start": "ng serve",
  "start:staging": "ng serve -c staging",
  "start:prod": "ng serve -c production",

  // ② それぞれの環境ごとにビルドファイルを出力するためのコマンド
  "build": "ng build",
  "build:staging": "ng build -c staging",
  "build:prod": "ng build -c prod",
  ...
}

@Component({
  selector: 'app-root',
  template: `
    <p *ngIf="env.isLocal">ようこそ {{profile.fullName}} さん</p>
    ...
    <span class="..." [ngClass]="alertClass">
  `,
})
export class AppComponent implements OnInit {
  profile: Profile;
  isLocal: boolean;
  alertClass: string;

  // 【怖い】 依存のどれを削除していいのか
  constructor(
    private repository: ProfileRepository,
    private envProvider: EnvProvider,
  ) {
    this.isLocal = this.envProvider.isLocal;

    // 【怖い】 インターフェースが本物とは変わってる...
    if (this.isLocal) {
      this.profile = { fullName: "偽武者" } as Profile;
    }
  }

  ngOnInit(): void {
    // 【怖い】 alertClass って変数は残したほうがいいのか？
    this.alertClass = this.isLocal ? 'local' : 'prod';

    if (!this.isLocal) {
      return;
    }
    this.repository.get().subscribe(...);
  }
}

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
// 【怖くない】 行単位で削除すれば良い
//   {
//     provide: ProfileRepository,
//     useFactory: (http) => {
//       if (environment.local) {
//         return new ProfileRepository(http);
//       }
//
//       return new FakeProfileRepository();
//     },
//     deps: [HttpClient],
//   },
  ],
  ...
})