import { computed } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { DropdownItemProps, DropdownProps, Form } from "semantic-ui-react";

import { Section } from "@common/sprinklersRpc";

import "@client/styles/SectionChooser";

@observer
export default class SectionChooser extends React.Component<{
  label?: string;
  inline?: boolean;
  sections: Section[];
  sectionId?: number;
  onChange?: (sectionId: number) => void;
}> {
  render() {
    const { label, inline, sections, sectionId, onChange } = this.props;
    if (onChange == null) {
      const sectionStr =
        sectionId != null ? sections[sectionId].toString() : "";
      return (
        <React.Fragment>
          {label || ""} '{sectionStr}'
        </React.Fragment>
      );
    }
    const section = sectionId == null ? "" : sectionId;
    return (
      <Form.Select
        className="sectionChooser"
        label={label}
        inline={inline}
        placeholder="Section"
        options={this.sectionOptions}
        value={section}
        onChange={this.onSectionChange}
      />
    );
  }

  private onSectionChange = (
    e: React.SyntheticEvent<HTMLElement>,
    v: DropdownProps
  ) => {
    this.props.onChange!(this.props.sections[v.value as number].id);
  };

  @computed
  private get sectionOptions(): DropdownItemProps[] {
    return this.props.sections.map((s, i) => ({
      text: s ? `${s.id}: ${s.name}` : null,
      value: i
    }));
  }
}