import Modal, { IInternalModalAttrs } from 'flarum/common/components/Modal';
import Mithril from 'mithril';
import app from 'flarum/admin/app';
import Select from 'flarum/common/components/Select';
import Stream from 'flarum/common/utils/Stream';
import Button from 'flarum/common/components/Button';
import { type Repository } from './ConfigureComposer';
import Form from 'flarum/common/components/Form';

export interface IRepositoryModalAttrs extends IInternalModalAttrs {
  onsubmit: (repository: Repository, key: string) => void;
  name?: string;
  repository?: Repository;
}

export default class RepositoryModal<CustomAttrs extends IRepositoryModalAttrs = IRepositoryModalAttrs> extends Modal<CustomAttrs> {
  protected name!: Stream<string>;
  protected repository!: Stream<Repository>;

  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
    super.oninit(vnode);

    this.name = Stream(this.attrs.name || '');
    this.repository = Stream(this.attrs.repository || { type: 'composer', url: '' });
  }

  className(): string {
    return 'RepositoryModal Modal--small';
  }

  title(): Mithril.Children {
    const context = this.attrs.repository ? 'edit' : 'add';
    return app.translator.trans(`flarum-extension-manager.admin.composer.${context}_repository_label`);
  }

  content(): Mithril.Children {
    const types = {
      composer: app.translator.trans('flarum-extension-manager.admin.composer.repositories.types.composer'),
      vcs: app.translator.trans('flarum-extension-manager.admin.composer.repositories.types.vcs'),
      path: app.translator.trans('flarum-extension-manager.admin.composer.repositories.types.path'),
    };

    return (
      <div className="Modal-body">
        <Form>
          <div className="Form-group">
            <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.name_label')}</label>
            <input className="FormControl" bidi={this.name} />
          </div>
          <div className="Form-group">
            <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.type_label')}</label>
            <Select
              options={types}
              value={this.repository().type}
              onchange={(value: 'composer' | 'vcs' | 'path') => this.repository({ ...this.repository(), type: value })}
            />
          </div>
          <div className="Form-group">
            <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.url')}</label>
            <input
              className="FormControl"
              onchange={(e: Event) => this.repository({ ...this.repository(), url: (e.target as HTMLInputElement).value })}
              value={this.repository().url}
            />
          </div>
          <div className="Form-group">
            <Button className="Button Button--primary" onclick={this.submit.bind(this)}>
              {app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.submit_button')}
            </Button>
          </div>
        </Form>
      </div>
    );
  }

  submit() {
    this.attrs.onsubmit(this.repository(), this.name());
    this.hide();
  }
}