import React, { Component } from "react";
import produce from "immer";

const SlotSelector: React.SFC<any> = ({ handleChange, selectedValue }) => {
  return (
    <select onChange={handleChange} value={selectedValue}>
      <option value="-1">SlotSelector</option>
      <option value="1">Option #1</option>
      <option value="2">Option #2</option>
      <option value="3">Option #3</option>
    </select>
  );
};

export class SlotManager extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = { slots: [] };
  }

  addSlot = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const {
      target: { value }
    } = e;
    this.setState(
      produce(draft => {
        draft.slots.push(value);
      })
    );
  };

  updateSlot = (idx: number, val: string) => {
    this.setState(
      produce(this.state, draft => {
        draft.slots[idx] = val;
      })
    );
  };

  removeSlot = (idx: number) => {
    this.setState(
      produce(this.state, draft => {
        draft.slots.splice(idx, 1);
      })
    );
  };

  render() {
    return (
      <>
        {this.state.slots.map((v: string, idx: number) => (
          <SlotSelector
            handleChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
              e.target.value === "-1"
                ? this.removeSlot(idx)
                : this.updateSlot(idx, e.target.value)
            }
            selectedValue={v}
            key={idx}
          />
        ))}
        <SlotSelector
          key="new"
          handleChange={this.addSlot}
          selectedValue="-1"
        />
      </>
    );
  }
}

class App extends Component {
  render() {
    return <SlotManager />;
  }
}

export default App;