import { Component, Injector, computed } from "@angular/core";
import { FormBuilder, FormControl } from "@angular/forms";

import { RoutedEditComponent } from "@shared";
import {
  <%= classify(name) %>ByIdQuery,
  <%= classify(name) %>ByIdQueryVariables,
  <%= classify(name) %>ByIdGql,
  Create<%= classify(name) %>sGql,
  Edit<%= classify(name) %>sGql,
  <%= classify(name) %>,
  <%= classify(name) %>DetailFragment,
} from "@shared/graphql/.generated/type";
import { RouteParamsMappings } from "@shared";

type EntityEditablePart = Pick<<%= classify(name) %>DetailFragment, "name">;

export type <%= classify(name) %>EditPageParams = {
  id: string;
};
@Component({
  selector: "app-<%= dasherize(name) %>-edit",
  templateUrl: "./edit.page.html",
  styles: [],
})
export class <%= classify(name) %>EditPage extends RoutedEditComponent<<%= classify(name) %>EditPageParams, <%= classify(name) %>DetailFragment, EntityEditablePart> {
  override routeParamsMappings: RouteParamsMappings<<%= classify(name) %>EditPageParams> = {
    id: { position: "queryParams", default: null },
  }
  id = computed(() => this.params$().id);
  override async onRouted(params: <%= classify(name) %>EditPageParams) {
    const id = params.id;
    this.mode = id ? "edit" : "create";
    let fb: FormBuilder = new FormBuilder();

    let formConfig: ValueOrTypedAbstractControl<EntityEditablePart>;
    if (id) {
      let res = await this.apollo
        .query<<%= classify(name) %>ByIdQuery, <%= classify(name) %>ByIdQueryVariables>({
          query: <%= classify(name) %>ByIdGql,
          variables: {
            id: id,
          },
        })
        .toPromise();
      let entity = res.data.<%= camelize(name) %>ById;
      this.entity = entity;
      formConfig = { name: new FormControl(entity.name) };
    } else {
      formConfig = { name: new FormControl("") };
    }
    let entityForm = fb.build(formConfig);
    this.entityForm = entityForm;
    this.originalValue = entityForm.value;

  }

  constructor(injector: Injector) {
    super(injector);
  }

  async submit(): Promise<void> {
    if (this.mode === "create") {
      await this.apollo
        .mutate({
          mutation: Create<%= classify(name) %>sGql,
          variables: {
            input: {
              name: this.entityForm.value.name,
            },
          },
        })
        .toPromise();
      this.msgSrv.success("添加成功");
      await this.back(true);
    } else {
      if (this.mode === "edit") {
        await this.apollo
          .mutate({
            mutation: Edit<%= classify(name) %>sGql,
            variables: {
              id: this.id(),
              input: {
                name: this.entityForm.value.name,
              },
            },
          })
          .toPromise();
        this.msgSrv.success("修改成功");
        await this.back(true);
      }
    }
  }
}