import SectionLineModel from "../model/sectionLineModel.js";
import { DOMS } from "../util/constant.js";
import SectionLineView from "../view/sectionLineView.js";

export default class SectionLineController {
  constructor() {
    this.model = new SectionLineModel();
    this.view = new SectionLineView();
  }
  init = () => {
    this.setButtonClickEvent();
    const sectionButtons = document.querySelectorAll(
      ".section-line-menu-button"
    );
    this.renderSectionLineEdit(sectionButtons[0]);
  };

  setButtonClickEvent = () => {
    DOMS.$app.addEventListener("click", this.setSelectedMenuEvent);
    DOMS.$app.addEventListener("click", this.setSubmitSectionEvent);
    DOMS.$app.addEventListener("click", this.setDeleteSectionEvent);
  };

  setSelectedMenuEvent = (event) => {
    if (!event.target.classList.contains("section-line-menu-button")) {
      return;
    }
    this.renderSectionLineEdit(event.target);
  };

  renderSelectedSection = (lineName) => {
    const $buttons = document.querySelectorAll(".section-line-menu-button");
    const currentBtn = Array.from($buttons).filter(
      (button) => button.dataset.lineName === lineName
    )[0];
    this.renderSectionLineEdit(currentBtn);
  };

  getStations = (lineName) => {
    return getLocalStorage("line-manager").find(
      (line) => Object.keys(line)[0] === lineName
    )[lineName];
  };

  setSubmitSectionEvent = ({ target }) => {
    if (target.id === "section-add-button") {
      const $sectionOrderInput = document.querySelector("#section-order-input");
      const $sectionStationSelector = document.querySelector(
        "#section-station-selector"
      );

      const lineName = target.dataset.lineName;
      const stationName =
        $sectionStationSelector.options[$sectionStationSelector.selectedIndex]
          .value;
      const order = $sectionOrderInput.value;
      if (this.cantAddStation(lineName, stationName)) {
        alert("역이름이 중복되었습니다");
        return;
      }

      this.addStation(stationName, order, lineName);
      this.renderSelectedSection(lineName);
    }
  };

  setDeleteSectionEvent = ({ target }) => {
    const lineName = target.dataset.lineName;
    if (!target.classList.contains("section-delete-button")) {
      return;
    }
    if (!confirm("정말로 삭제하시겠습니까")) {
      return;
    }
    if (!this.canDeleteStation(lineName)) {
      alert("2개 이하의 역개수는 지울수 없습니다");
      return;
    }
    const deleteIdx = target.dataset.idx;
    this.deleteStation(deleteIdx, lineName);
    this.renderSelectedSection(lineName);
  };

  canDeleteStation = (lineName) => {
    const stations = this.getStations(lineName);
    return stations.length > 2;
  };

  cantAddStation = (lineName, newStation) => {
    const stations = this.getStations(lineName);
    return stations.some((station) => station === newStation);
  };
}
