
import { FC, memo, useCallback, useState } from "react";
import { useDispatch } from "react-redux";
import HomePage from "@mui/icons-material/HomeOutlined";
// import {ReactComponent as PageIcon} from "@/assets/page.svg"
import PageIcon from "@mui/icons-material/DescriptionOutlined";
import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
import { executionActions } from "@/redux/currentApp/executionTree/executionSlice";
import SettingsIcon from "@mui/icons-material/Settings";
import AddIcon from "@mui/icons-material/Add";
import { Modal } from "../ChangePathModal/modal";
import { PageItemProps } from "./interface";
import {
  actionAreaContainerStyle,
  // baseIconStyle,
  iconHotSpotContainerStyle,
  pageItemContainerStyle,
  pageItemInnerContainerStyle,
  pageNameContainerStyle,
  pageNameStyle,
  parentPageNameStyle,
  plusIconStyle,
} from "./style";
import { Trigger } from "@/utils/trigger";
import { Dropdown } from "@/utils/DropDown";
import { ActionMenu } from "../ActionMenu";

export const PageItem: FC<PageItemProps> = (props) => {
  const {
    isHomePage,
    pageName,
    level = 1,
    parentPageName,
    subPagePaths,
    currentPagePath,
    currentSubPagePath,
  } = props;

  const isSelected = !currentSubPagePath && currentPagePath === pageName;
  const subPageIsSelected =
    currentPagePath === parentPageName && pageName === currentSubPagePath;

  const dispatch = useDispatch();
  const [modalVisible, setModalVisible] = useState(false);
  const [actionMenuVisible, setActionMenuVisible] = useState(false);
  const [currentPageName, setCurrentPageName] = useState(pageName);
  const handleClickChangePage = useCallback(() => {
    if (!parentPageName) {
      dispatch(
        executionActions.updateCurrentPagePathReducer({
          pageDisplayName: pageName,
        })
      );
    } else {
      dispatch(
        executionActions.updateCurrentPagePathReducer({
          pageDisplayName: parentPageName,
          subPagePath: pageName,
        })
      );
    }
  }, [dispatch, pageName, parentPageName]);

  const handlerAfterClose = useCallback(() => {
    if (!parentPageName) {
      // if (!isValidDisplayName(currentPageName)) {
      //   message.error({
      //     content: t("editor.display_name.validate_error", {
      //       displayName: currentPageName,
      //     }),
      //   })
      //   setCurrentPageName(pageName)
      //   return
      // }
      dispatch(
        componentsActions.updateComponentDisplayNameReducer({
          displayName: pageName,
          newDisplayName: currentPageName,
        })
      );
    } else {
      dispatch(
        componentsActions.updateSubPagePathReducer({
          pageName: parentPageName,
          subPagePath: currentPageName,
          oldSubPagePath: pageName,
        })
      );
    }
  }, [currentPageName, dispatch, pageName, parentPageName]);
  const handleOpenModal = useCallback(() => {
    setModalVisible(true)
  }, []);

  const addSubPage = useCallback(() => {
    if (!parentPageName) {
      dispatch(
        componentsActions.addSubPageReducer({
          pageName: pageName,
        })
      );
    }
  }, [dispatch, pageName, parentPageName]);

  return (
    <>
      <Trigger 
        withoutPadding
        // colorScheme="white"
        popupVisible={modalVisible}
        content={
          <Modal
            path={currentPageName}
            onCloseModal={() => {
              setModalVisible(false);
            }}
            handleUpdateItem={setCurrentPageName}
            isParentPage={level === 1}
          />
        }
        trigger="focus"
        showArrow={false}
        position="right"
        clickOutsideToClose
        onVisibleChange={(visible) => {
          if (!visible) {
            setModalVisible(false);
            handlerAfterClose();
          }
        }}
      >
        <span>
          <Dropdown
            position="bottom-end"
            trigger="contextmenu"
            popupVisible={actionMenuVisible}
            dropList={
              <ActionMenu
                pageDisplayName={pageName}
                isParentPage={level === 1}
                parentPageName={parentPageName}
                openRenameModal={handleOpenModal}
              />
            }
            onVisibleChange={setActionMenuVisible}
          >
            <div
              css={pageItemContainerStyle(
                isSelected || subPageIsSelected,
                level
              )}
              onClick={handleClickChangePage}
            >
              <div css={pageItemInnerContainerStyle}>
                <div css={pageNameContainerStyle}>
                  {!parentPageName && (
                    <PageIcon sx={{ fontSize: "14px", marginBottom: "-2px" }} />
                  )}
                  {parentPageName && (
                    <span css={parentPageNameStyle}>/{parentPageName}</span>
                  )}
                  <span css={pageNameStyle}>/{pageName}</span>
                </div>
                <div css={actionAreaContainerStyle} className="icon-area">
                  {isHomePage && (
                    <div css={iconHotSpotContainerStyle}>
                      <HomePage sx={{ fontSize: "12px", color: "gray" }} />
                    </div>
                  )}
                  <div
                    css={iconHotSpotContainerStyle}
                    onClick={() => {
                      setActionMenuVisible(true);
                    }}
                  >
                    <SettingsIcon css={plusIconStyle} />
                  </div>
                  {level === 1 && (
                    <div css={iconHotSpotContainerStyle} onClick={addSubPage}>
                      <AddIcon css={plusIconStyle} />
                    </div>
                  )}
                </div>
              </div>
            </div>
          </Dropdown>
        </span>
      </Trigger>
      {subPagePaths &&
        Array.from(subPagePaths).map((subPagePath) => {
          return (
            <PageItem
              key={subPagePath}
              level={level + 1}
              parentPageName={pageName}
              isHomePage={false}
              pageName={subPagePath}
              currentPagePath={currentPagePath}
              currentSubPagePath={currentSubPagePath}
            />
          );
        })}
    </>
  );
};

PageItem.displayName = "DataWorkspace-PageItem";
export default memo(PageItem);
