import { React, useState, useContext, useRef, useEffect} from 'react';
import { StoreContext } from '../utils/store';
import { removeItemAndUpdateParent, updateItem } from '../utils/utils';

import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import 'react-tabs/style/react-tabs.css';
import MenuItemEditorForm from "./MenuItemEditorForm";
import ItemSearchInterface from "./ItemSearchInterface";
import appDebug from "../utils/appDebug";
import { AppConfig } from "../config/AppConfig";

//import PropTypes from 'prop-types';

const ItemTypes = {
  post: "post_type",
  link: "custom",
  taxonomy: "taxonomy"
}

const MenuItemEditor = (props) => {

  const { item, index, parent } = props;

  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
  const [titleWasEdited, setTitleWasEdited] = useState(false);
  const store = useContext(StoreContext);
  const origItem = useRef(null);

  useEffect(
    () => {
      if (!origItem.current) {
        appDebug(AppConfig.debugCategoryDefault, 'resetting origItem');
        origItem.current = {...item};

        //console.log("ITEM IS", item);

        if (item.type == ItemTypes.link) {
          /* @TODO make this more robust */
          setSelectedTabIndex(2);
        } 
        else if (item.type == ItemTypes.taxonomy) {
          setSelectedTabIndex(1);
        }          
      }
    }, []
  );

  const cancelEdit = (e) => {

    store.unMarkChangedItem(item, store.menuItemChangeTypes.edit);

    if (item.isNewAddition) {
      store.setMenuItems(removeItemAndUpdateParent(store.menuItems, item));
    }
    else {
      const revertedItem = {...origItem.current};
      revertedItem.showEditor = false;
      
      store.setMenuItems(updateItem(store.menuItems, revertedItem));
      
    }

  }

  const applyPostFromResults = (searchResults, idToAdd) => {
    return applyItemFromResults(store.postTypes, "post_type", searchResults, idToAdd);
  }

  const applyTaxonomyTermFromResults = (searchResults, idToAdd) => {
    return applyItemFromResults(store.taxonomyTypes, "taxonomy", searchResults, idToAdd);
  }
  
  // const applyPostFromResults = (typesArr, searchResults, idToAdd) => {
  //   const resultsIndex = searchResults.findIndex(result => result.ID == idToAdd);
  //   const postData = searchResults[resultsIndex];

  //   console.log(postData);
  //   console.log(store.postTypes);

  //   const type_slug = postData.type_slug;
  //   const type_index = store.postTypes.findIndex(type => type.type_slug == type_slug);

  //   console.log('type slug', type_slug, 'type index', type_index);
  //   console.log(store.postTypes);

  //   const type_label = store.postTypes[type_index]?.labels?.singular_name ? store.postTypes[type_index].labels.singular_name : store.postTypes[type_index].labels.name;

  //   item.object = postData.post_type;
  //   item.object_id = postData.ID;
  //   item.object_title = postData.display_title;
  //   item.display_link = postData.display_link;
  //   item.goto_link = postData.goto_link;
  //   item.edit_link = postData.edit_link;

  //   if (!titleWasEdited) {
  //     item.title = postData.display_title;
  //   }
    
  //   item.type = "post_type";
  //   item.type_label = type_label;

  //   store.setMenuItems(updateItem(store.menuItems, item));
  //   store.markChangedItem(item, store.menuItemChangeTypes.edit);

  // }

  const applyItemFromResults = (typesArray, typeName, searchResults, idToAdd) => {
    const resultsIndex = searchResults.findIndex(result => result.ID == idToAdd);
    const itemData = searchResults[resultsIndex];

    const typeSlug = itemData.type_slug;
    const typeIndex = typesArray.findIndex(type => type.type_slug == typeSlug);

    const typeLabel = typesArray[typeIndex]?.labels?.singular_name ? typesArray[typeIndex].labels.singular_name : typesArray[typeIndex].labels.name;

    item.object = itemData.type_slug;
    item.object_id = itemData.ID;
    item.object_title = itemData.display_title;
    item.display_link = itemData.display_link;
    item.goto_link = itemData.goto_link;
    item.edit_link = itemData.edit_link;

    if (!titleWasEdited) {
      item.title = itemData.display_title;
    }
    
    item.type = typeName;
    item.type_label = typeLabel;

    store.setMenuItems(updateItem(store.menuItems, item));
    store.markChangedItem(item, store.menuItemChangeTypes.edit);

  }

  const handleTabChange = (index, lastIndex, e) => {
    appDebug(AppConfig.debugCategoryDefault, 'tab changed', e, e.target.getAttribute('item_type'));

    setSelectedTabIndex(index);

    const newType = ItemTypes[e.target.getAttribute('item_type')];

    if (origItem.current && (newType == origItem.current?.type)) {
      //
      // When switching back to the original tab, we reset the item data
      //
      store.setMenuItems(updateItem(store.menuItems, origItem.current));
    }
    else {
      store.setMenuItems(updateItem(store.menuItems, {...item, 'type': newType}));
    }

    
  }

  const fieldEditEventHandler = (e) => {

    const fieldKey = e.target?.getAttribute('name') ?? null;

    if (fieldKey == 'title') {
      setTitleWasEdited(true);
    }

  }

  return (
    <div className="mmu-menu-item-editor">
      {/* <div className="mmu-menu-item-summary">
        <div className={"mmu-menu-item-title" + ((item.marked_for_delete) ? " mmu-menu-item-title--delete" : "")}>INDEX: {index} | {item.ID}:{item.title} | parent id: {parent ? parent.ID : "null"} | parent expanded: {(parent && parent.expanded) ? "true": "false"} | expanded: {item.expanded ? "true" : "false"} | depth: {item.depth}</div>
      </div> */}

      <Tabs onSelect={handleTabChange} selectedIndex={selectedTabIndex}>
        <TabList>
          <Tab item_type="post">Content</Tab>
          <Tab item_type="taxonomy">Taxonomy/Categories</Tab>
          <Tab item_type="link">Custom Link</Tab>
        </TabList>
        <TabPanel>
          <div className="mmu-menu-item-editor-mode--content">
            
            <div className="mmu-menu-item-editor-section">
              <div className="mmu-menu-item-editor-section-header">
                <h2 className="mmu-menu-item-editor-section-heading">Menu Item Settings</h2>
              </div>
              
              <MenuItemEditorForm forItemType="post" item={item} origItem={origItem} fieldEditEventHandler={fieldEditEventHandler}></MenuItemEditorForm>
            </div>
            
            <div className="mmu-menu-item-editor-section">
              <div className="mmu-menu-item-editor-section-header">
                <h2 className="mmu-menu-item-editor-section-heading">Find Content</h2>
              </div>
              <ItemSearchInterface itemType="post" selectAction={applyPostFromResults} />
            </div>
          </div>
        </TabPanel>
        <TabPanel>
          <div className="mmu-menu-item-editor-mode--taxonomy">
            
            <div className="mmu-menu-item-editor-section">
              <div className="mmu-menu-item-editor-section-header">
                <h2 className="mmu-menu-item-editor-section-heading">Menu Item Settings</h2>
              </div>
              
              <MenuItemEditorForm forItemType="taxonomy" item={item} origItem={origItem} fieldEditEventHandler={fieldEditEventHandler}></MenuItemEditorForm>
            </div>
            
            <div className="mmu-menu-item-editor-section">
              <div className="mmu-menu-item-editor-section-header">
                <h2 className="mmu-menu-item-editor-section-heading">Find Terms</h2>
              </div>
              <ItemSearchInterface itemType="taxonomy" selectAction={applyTaxonomyTermFromResults} />
            </div>
          </div>
        </TabPanel>        
        <TabPanel>
          <div className="mmu-menu-item-editor-section">
            <h2>Custom Link</h2>
            <MenuItemEditorForm forItemType="custom" item={item} origItem={origItem} fieldEditEventHandler={fieldEditEventHandler} item={item}></MenuItemEditorForm>
          </div>
        </TabPanel>
      </Tabs>
      
      <div className="mmu-menu-item-editor-actions mmu-menu-item-editor-actions--secondary">
        <a className="mmu-button mmu-button--secondary" onClick={(e) => cancelEdit(e)}>Cancel {item.isNewAddition ? "Add" : "Edit"}</a>
      </div>
      

    </div>
  );
} 

export default MenuItemEditor;