import "./create-resource.scss";

import React from "react";
import jsYaml from "js-yaml"
import { observable } from "mobx";
import { observer } from "mobx-react";
import { Plural, t, Trans } from "@lingui/macro";
import { cssNames } from "../../utils";
import { createResourceStore } from "./create-resource.store";
import { IDockTab } from "./dock.store";
import { EditorPanel } from "./editor-panel";
import { InfoPanel } from "./info-panel";
import { resourceApplierApi } from "../../api/endpoints/resource-applier.api";
import { _i18n } from "../../i18n";
import { JsonApiErrorParsed } from "../../api/json-api";
import { Notifications } from "../notifications";

interface Props {
  className?: string;
  tab: IDockTab;
}

@observer
export class CreateResource extends React.Component<Props> {
  @observable error = ""

  get tabId() {
    return this.props.tab.id;
  }

  get data() {
    return createResourceStore.getData(this.tabId);
  }

  onChange = (value: string, error?: string) => {
    createResourceStore.setData(this.tabId, value);
    this.error = error;
  }

  create = async () => {
    if (this.error) return;
    const resources = jsYaml.safeLoadAll(this.data)
      .filter(v => !!v) // skip empty documents if "---" pasted at the beginning or end
    const createdResources: string[] = [];
    const errors: string[] = [];
    await Promise.all(
      resources.map(data => {
        return resourceApplierApi.update(data)
          .then(item => createdResources.push(item.getName()))
          .catch((err: JsonApiErrorParsed) => errors.push(err.toString()))
      })
    );
    if (errors.length) {
      errors.forEach(Notifications.error);
      if (!createdResources.length) throw errors[0];
    }
    return (
      <p>
        <Plural value={createdResources.length} one="Resource" other="Resources"/>{" "}
        <Trans><b>{createdResources.join(", ")}</b> successfully created</Trans>
      </p>
    )
  }

  render() {
    const { tabId, data, error, create, onChange } = this;
    const { className } = this.props;
    return (
      <div className={cssNames("CreateResource flex column", className)}>
        <EditorPanel
          tabId={tabId}
          value={data}
          onChange={onChange}
        />
        <InfoPanel
          tabId={tabId}
          error={error}
          submit={create}
          submitLabel={_i18n._(t`Create`)}
          showNotifications={false}
        />
      </div>
    )
  }
}