import { observable, action, computed } from 'mobx';
import {TreeSelect} from "antd";
import React from "react";

export default class ContentManager {
    
        @observable list = [];
        @observable listItems = [];
        @observable listTags = [];
        @observable listTypes = [];
        @observable selected = {};
        @observable istLoading = false;
        @observable isSearching = false;
        @observable filtered = [];
        // @observable itemSearch = [{value : 'cou',title:'cooo',selectable: false,children :[{value :'yeyeye',title :'KOKOKO'}]},
        //     {value : 'skemberlu',title:'anehya',selectable: false,children :[{value :'ngerti',title :'nice'}]}];
      @observable itemSearch = [];
      @observable selectedItems = [];

        constructor(context) {
            this.http = context.http;
            this.context = context;
        }

        @action
        addSelectedItem(id){
          // this.itemSearch = this.itemSearch.filter(it=>it.id === id);
          // this.selectedItems = this.selectedItems.concat(this.itemSearch);
          this.selectedItems.push(this.itemSearch.find(it=>it.id === id));
          this.itemSearch = this.selectedItems;
          console.log(this.selectedItems,'==== selected');
        }

        @action
        clearItems(){
          this.selectedItems = [];
          this.itemSearch = [];
        }


        @action
        itemChange(ids){
          console.log('item changed',ids,this.selectedItems.length);
          if(this.selectedItems.length === ids.length){
            return
          }
          else{
            this.selectedItems = this.selectedItems.filter(it=>ids.findIndex(id=>id == it.id) > -1);
            this.itemSearch = this.selectedItems;
          }
        }

      @action
      loadItems(ids){
        let query = ids.reduce((acc,value)=>{
          acc = acc+'item_ids='+value+"&";
          return acc;
        },'');
        this.isLoading = true;

        return this.http.get("items?"+query)
          .then(res => {
            this.itemSearch = res.data;
            this.selectedItems = res.data;
            this.isLoading = false;
          })
          .catch(err => {
            this.isLoading = false;
            throw err;
          })
      }

        @action
        getItem(search){
          if(this.selectedItems.length == 0){
            this.itemSearch = [];
          }

          if(search == ''){
            this.itemSearch = this.selectedItems.concat([]);
            return;
          }

          this.isLoading = true;
          console.log('searching');
          return this.http.get("items?search="+search)
            .then(res => {
              this.itemSearch = this.selectedItems.concat(res.data);
              this.isLoading = false;
            })
            .catch(err => {
              this.isLoading = false;
              throw err;
            })
        }

        @action
        getList(){
            this.isLoading = true;
            return this.http.get("posts")
            .then(res => {
              this.list = res;
              this.isLoading = false;
            })
            .catch(err => {
              this.isLoading = false;
              throw err;
            })
        }

        @action
        getTags(){
            this.isLoading = true;
            return this.http.get("tags")
            .then(res => {
              this.listTags = res;
              this.isLoading = false;
            })
            .catch(err => {
              this.isLoading = false;
              throw err;
            })
        }

        @action
        getTypes(){
            this.isLoading = true;
            return this.http.get("posts")
            .then(res => {
              this.listTypes = res;
              this.isLoading = false;
            })
            .catch(err => {
              this.isLoading = false;
              throw err;
            })
        }

        @action
        getDetail(id){
            this.isLoading = true;
            return this.http.get(`posts/${id}`)
            .then(res => {
              console.log(res,'ini res store')
              this.selected = res;
              this.isLoading = false;
            })
            .catch(err => {
              this.isLoading = false;
              throw err;
            })
        } 
    
        @action
        post(data){
            this.isLoading = true;
            return this.http.post("posts", data)
              .then(res => {
                console.log('rest men',res);
                this.isLoading = false;
                this.getList();
                return res;
              })
              .catch(err => {
                console.log(err,'err men')
                this.isLoading = false;
                throw err;
              })
        }
    
        @action
        put(id,data){
            this.isLoading = true;
            return this.http.put(`posts/${id}`, data)
              .then(res => {
                this.isLoading = false;
                this.getList();
                return res;
              })
              .catch(err => {
                this.isLoading = false;
                throw err;
              })
        }
    
        @action
        delete(id){
            this.isLoading = true;
            return this.http.delete(`posts/${id}`)
              .then(res => {
                this.isLoading = false;
                this.getList();
                return res;
              })
              .catch(err => {
                this.isLoading = false;
                throw err;
              })
        }

        filterItems = (query) => {
          return this.list.filter((el) =>
            el.title.toLowerCase().indexOf(query.toLowerCase()) > -1 
          );
        }

        @action
        search(text){
          this.filtered = this.filterItems(text);
        }
    }
