import RenderComponentCanvasContainerMobile from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainerMobile";
import RenderChildrenCanvas from "../RenderChildrenCanvas";
import React, { useMemo } from "react";
import { Platform, View, Text, ViewStyle, Pressable } from "react-native";
import { RowContent } from "../CSSGrid/utils";
import { configActions } from "@/redux/config/configSlice";
import { isCurrentNodeDisable } from "@/redux/currentApp/components/componentsSelector";
import { getStyleMap } from "@/utils/getStyleMap";
import store, { RootState } from "@/store";

export const NativeChild = ({
  children,
  index,
  dispatch,
  modalVisible,
  menuPosition,
  setModalVisible,
  handleDeleteOptionItem,
  context
}: {
  children: any;
  index: number;
  dispatch: any;
  modalVisible: boolean;
  menuPosition: { top: number; left: number };
  setModalVisible: (visible: boolean) => void;
  handleDeleteOptionItem: (index: number) => void;
  context: any;
}) => {
  const childStyles = useMemo(() => (
    getStyleMap(
      children?.props?.trueClasses,
      children?.props?.falseClasses,
      children?.props?.isClassTrue ?? true,
      context
    )
  ), [children?.props, context]);

  const flattenedStyles = Array.isArray(childStyles)
  ? childStyles.flat().reduce((merged, styleObj) => ({ ...merged, ...styleObj }), {})
  : childStyles || {};

  const subContainerStyle: ViewStyle = {
      // height: "100%",
      // width: "100%",
      // borderColor:'#9793FD',
      // borderWidth: 0.5,
      // paddingLeft: 10,
      // paddingRight: 10 
      borderColor: Platform.OS === 'web' ? '#9793FD' : "none",
      borderWidth: Platform.OS === 'web' ? 0.5 : 0
    }
  return (
    <Pressable
      key={children.displayName}
      style={{
        ...flattenedStyles,
        ...subContainerStyle,
        flex: children?.props?.flex ?? 1,
        // alignItems: children?.props?.align,
        // flexDirection: "row",
        // justifyContent: children?.props?.justify
        // width: "50%"
        // Default to 1 if undefined
      }}
      onPress={(e: any) => {
        e.stopPropagation();
        if (!isCurrentNodeDisable(children.displayName,store.getState() as RootState)) {
          dispatch(configActions.updateSelectedComponent([children.displayName]));
        }
      }}
      // onContextMenu={(event: any) => {
      //   if (isEditMode) {
      //     event?.preventDefault();
      //     event?.stopPropagation();
      //     setModalVisible((pre) => !pre);
      //     setMenuPosition({ top: event.clientY, left: event.clientX });
      //   }
      // }}
    >
      {Platform.OS === 'web' && (
        <View style={{
          position: 'absolute',
          zIndex: 1,
          bottom: 0,
          right: 0,
          backgroundColor: '#E2EAF4',
          padding: 1, // Fixed: Removed quotes
          borderWidth: 0.5, // Fixed: Separate border properties
          borderColor: '#9793FD',
          borderStyle: 'dotted',
          width: 40,   // Set a smaller width
          height: 10,
        }}>
          <Text style={{ fontSize: 6 }}>
            {children.displayName}
          </Text>
        </View>
      )}
      
      {modalVisible && Platform.OS === 'web' && (
        <View
          style={{
            position: 'absolute',
            zIndex: 30,
            backgroundColor: 'white',
            // color: 'black',
            // textAlign: 'left',
            shadowColor: 'gray',
            shadowOffset: { width: 2, height: 2 },
            shadowOpacity: 0.8,
            shadowRadius: 5,
            borderRadius: 5,
            left: menuPosition.left - 20,
            top: menuPosition.top,
            // fontSize: 14,
            paddingTop: 10,
            // fontFamily: 'Roboto',
          }}
        >
          <RowContent
            click={(e: any) => {
              e.stopPropagation();
              handleDeleteOptionItem(index);
            }}
            setModalVisible={setModalVisible}
            rowContent="Delete View"
            error={false}
          />
        </View>
      )}

      {Platform.OS === 'web' ? (
        <>
          {/* <RenderComponentCanvasContainer displayName={""} containerPadding={""}/> */}
          <RenderChildrenCanvas
            displayName={children.displayName}
            columnNumber={1}
            handleUpdateHeight={() => { }}
            canResizeCanvas={false}
            containerPadding={"1px"}
            key={children.displayName + "Nativecanvas"}
            gridContainer={true}
          />
        </>
      ) : (
        <RenderComponentCanvasContainerMobile
          displayName={children.displayName}
          containerPadding={""}
          key={children.displayName + "Nativecanvas"}
          columnNumber={1}
        />
      )}
    </Pressable>
  );
};