import { defineComponent } from 'vue';
import { useStore } from '../store';

export default defineComponent({
  setup() {
    return {
      store: useStore(),
    };
  },

  methods: {
    addChange(stationName: string, propName: string, oldValue: any, newValue: any) {
      if (oldValue === newValue) return;

      if (this.store.changeList[stationName] === null || !(stationName in this.store.changeList))
        this.store.changeList[stationName] = {};

      if (propName === 'name') {
        const station = this.store.stationList[this.store.stationList.findIndex((v) => v.name == newValue)];
        console.log(oldValue, newValue, station);

        this.store.changeBackupList[oldValue] = { ...station, name: oldValue };
        this.store.changeBackupList[newValue] = null;

        this.store.changeList[oldValue] = null;
        this.store.changeList[newValue] = { ...station };
      } else {
        this.store.changeList[stationName][propName] = newValue;

        if (!this.store.changeBackupList[stationName]) this.store.changeBackupList[stationName] = {};

        if (this.store.changeBackupList[stationName][propName] === undefined)
          this.store.changeBackupList[stationName][propName] = oldValue;
      }

      if (this.store.changeList[stationName][propName] == this.store.changeBackupList[stationName][propName]) {
        delete this.store.changeList[stationName][propName];
        delete this.store.changeBackupList[stationName][propName];

        if (Object.keys(this.store.changeList[stationName]).length == 0) delete this.store.changeList[stationName];

        if (Object.keys(this.store.changeBackupList[stationName]).length == 0)
          delete this.store.changeBackupList[stationName];
      }

      this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
    },
  },
});