import { FC, useCallback, useContext, useState } from "react";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
// import { CopyIcon, ReduceIcon, Trigger } from "@illa-design/react"
import { ViewListSetterContext } from "@/page/app/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/context/viewsListContext";
import { DragIconAndLabel } from "@/page/app/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/dragIconAndLabel";
import { ViewItemShape } from "@/page/app/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface";
import {
  actionWrapperStyle,
  copyIconStyle,
  iconStyle,
  listItemTriggerWrapperStyle,
} from "@/page/app/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/style";
import { BaseModal } from "@/page/app/components/InspectPanel/PanelSetters/PublicComponent/Modal";
import { SelectedProvider } from "@/page/app/components/InspectPanel/context/selectedContext";
import { getComponentNodeBySingleSelected } from "@/redux/currentApp/components/componentsSelector";
import { Trigger } from "@/utils/trigger";
import RemoveIcon from "@mui/icons-material/Remove";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
interface ListItemProps {
  value: ViewItemShape;
  index: number;
  label?: string;
  isSelected: boolean;
}

export const ListItem: FC<ListItemProps> = (props) => {
  const { label, index, isSelected } = props;
  const [modalVisible, setModalVisible] = useState(false);
  const {
    handleDeleteOptionItem,
    handleCopyOptionItem,
    attrPath,
    widgetDisplayName,
    childrenSetter,
    handleUpdateDsl,
    handleUpdateMultiAttrDSL,
    handleUpdateOtherMultiAttrDSL,
  } = useContext(ViewListSetterContext);
  const { t } = useTranslation();

  const handleCloseModal = useCallback(() => {
    setModalVisible(false);
  }, []);

  const singleSelectedComponentNode = useSelector(
    getComponentNodeBySingleSelected
  );

  const widgetType = singleSelectedComponentNode?.type || "";
  const widgetParentDisplayName = singleSelectedComponentNode?.parentNode || "";
  const widgetProps = singleSelectedComponentNode?.props || {};

  return (
    <Trigger
      withoutPadding
      colorScheme="white"
      popupVisible={modalVisible}
      content={
        <SelectedProvider
          widgetType={widgetType}
          widgetDisplayName={widgetDisplayName}
          widgetParentDisplayName={widgetParentDisplayName}
          widgetProps={widgetProps}
          handleUpdateDsl={handleUpdateDsl}
          handleUpdateMultiAttrDSL={(updateSlice) => {
            handleUpdateMultiAttrDSL?.(updateSlice);
          }}
          handleUpdateOtherMultiAttrDSL={(displayName, updateSlice) => {
            handleUpdateOtherMultiAttrDSL?.(displayName, updateSlice);
          }}
          widgetOrAction="WIDGET"
        >
          <BaseModal
            title={t("editor.inspect.setter_content.option_list.model_title")}
            handleCloseModal={handleCloseModal}
            attrPath={`${attrPath}.${index}`}
            widgetDisplayName={widgetDisplayName}
            childrenSetter={childrenSetter}
          />
        </SelectedProvider>
      }
      trigger="click"
      showArrow={false}
      position="left"
      clickOutsideToClose
      onVisibleChange={(visible) => {
        setModalVisible(visible);
      }}
    >
      <span css={listItemTriggerWrapperStyle}>
        <DragIconAndLabel index={index} label={label} isSelected={isSelected} />
        <span css={actionWrapperStyle}>
         
          <RemoveIcon
            css={iconStyle}
            onClick={(e) => {
              e.stopPropagation();
              handleDeleteOptionItem(index);
            }}
          />
           <AddCircleOutlineIcon
            id="copyIcon"
            css={copyIconStyle}
            onClick={(e) => {
              e.stopPropagation();
              handleCopyOptionItem(index);
            }}
          />
        </span>
      </span>
    </Trigger>
  );
};
