import { defineStore } from "pinia";
import loadingStore from './loading.js';
import pinia from '@/stores/main.js'
import axios from "axios";
import moment from 'moment';
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

const loading = loadingStore(pinia);
const $toast = useToast();
// Delay loading and toast 待模組化
let delay = s =>  new Promise((resolve, reject) => setTimeout(resolve, s));

export default defineStore('filesStore', {
  state: () => ({
    allFilter: [
      {
        log: {},
        fileType: '',
        ownerName: '',
      }
    ],
    allEventLog: [
      {
        parentLog: '',
        fileType: '',
        ownerName: '',
      }
    ],
    switchFilesTagData: {
      ALL: ['Log', 'Filter', 'Rule', 'Design'],
      DISCOVER: ['Log', 'Filter', 'Rule'],
      COMPARE: ['Log','Filter'],
      DESIGN: ['Log', 'Design'],
    },
    filesTag: 'ALL',
    httpStatus: 200,
  }),
  getters: {
  /**
   * Get allFiles and switch files tag
   */
  allFiles: state => {
    let result = [
      ...state.allEventLog,
      ...state.allFilter
    ];
    let data = state.switchFilesTagData;
    let filesTag = state.filesTag;

    result = result.filter(file => data[filesTag].includes(file.fileType));

    return result;
    },
  },
  actions: {
    /**
     * Fetch event logs api
     */
    async fetchEventLog() {
      const api = '/api/logs';

      try {
        const response = await axios.get(api);

        this.allEventLog = response.data;
        this.allEventLog.map(o => {
          o.icon = 'work_history';
          o.parentLog = "-";
          o.fileType = "Log";
          o.ownerName = o.owner.name;
          o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
          o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
          return this.allEventLog
        })
        if(this.httpStatus < 300) loading.isLoading = false;
      } catch(error) {
        console.dir(error); // safari 測試
        this.httpStatus = error.request.status;
        delay().then(() =>{
          loading.isLoading = true;
          return delay(1000);
        }).then(()=>{
          loading.isLoading = false;
          return delay(500);
        }).then(() => {
          $toast.default('Failed to load the logs.',{position: 'bottom'});
        })
      };
    },
    /**
     * Fetch filters api
     */
    async fetchFilter() {
      const api = '/api/filters';

      try {
        const response = await axios.get(api);

        this.allFilter = response.data;
        this.allFilter.map(o => {
          o.icon = 'tornado';
          o.parentLog = o.log.name;
          o.fileType = "Filter";
          o.ownerName = o.owner.name;
          o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
          o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
        });
        if(this.httpStatus < 300) loading.isLoading = false;
      } catch(error) {
        console.dir(error); // safari 測試
        this.httpStatus = error.request.status;
        delay().then(() =>{
          loading.isLoading = true;
          return delay(1000);
        }).then(()=>{
          loading.isLoading = false;
          return delay(500);
        }).then(() => {
          $toast.default('Failed to load the filters.',{position: 'bottom'});
        })
      };
    },
    // fetchRule(){o.icon = local_police}
    // fetchDesign(){o.icon = shape_line}
  },
})