import { FC, ReactNode, useCallback, useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import {
  actionItemContainer,
  restapiItemLabelStyle,
  restapiItemStyle,
  urlStyle,
} from "./style";
import {
  getCachedAction,
  getSelectedAction,
} from "@/redux/config/configSelector";
import { configActions } from "@/redux/config/configSlice";
import { RootState } from "@/store";
import {
  // Params,
  RestAPIAction,
  RestAPIBodyContent,

} from "@/page/App/components/PublicTypes/action/restApi";
import { ActionItem } from "@/redux/currentApp/action/interface";
import {
  Resource,
  RestApiAuth,
  RestApiResource,
} from "@/page/App/components/PublicTypes/resource";
import { Trigger } from "@/utils/trigger/trigger";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import { getControllerRules } from "@/redux/currentApp/executionController/controllerSelector";
import {
  // ParamDescription,
  Rule,
} from "@/redux/currentApp/executionController/interface";
import { RecordEditor } from "@/components/RecordEditor";
import { BodyEditor } from "../RestApiPanel/BodyEditor";
import { useTheme } from "@mui/material";
export interface SelectOptionObject {
  label: string | ReactNode;
  value: string | number;
  disabled?: boolean;
}
export type SelectValue =
  | SelectOptionObject
  | string
  | SelectOptionObject[]
  | string[]
  | number
  | number[];

const ImapaktAppsPanel: FC = () => {
  // const { t } = useTranslation();
  const [open, setopen] = useState(false);
  const cachedAction = useSelector(getCachedAction) as ActionItem<
    RestAPIAction<RestAPIBodyContent>
  >;
  const theme = useTheme();
  const selectedAction = useSelector(getSelectedAction) as ActionItem<
    RestAPIAction<RestAPIBodyContent>
  >;
  const content = cachedAction.content as RestAPIAction<RestAPIBodyContent>;
  const dispatch = useDispatch();
  const AllRulesMap = useSelector(getControllerRules);
  const currentResource = useSelector((state: RootState) => {
    return state.resource.find(
      (r) => r.resourceID === cachedAction?.resourceID
    );
  });
  const handleChangeMethod = useCallback(
    (value?: string) => {
   
      dispatch(
        configActions.updateCachedAction({
          ...cachedAction,
          ruleRef: {
            $refText: value,
            $ref: value,
          }
        })
      );
    },
    [cachedAction, dispatch]
  );
  const openHandler = async () => {
    setopen(true);
    // getRules().then((res)=>{
    //   dispatch(ControllerActions.setResourceRulesReducer(res));

    // })
  };
  return (
    <div css={actionItemContainer}>
      <div css={restapiItemStyle}>
        <span css={restapiItemLabelStyle(theme)}>
          Rule Name
          {/* {t("editor.action.resource.restapi.label.action_type")} */}
        </span>
        <Select
          sx={{
            fontSize: "12px",
            // width: "100%",
            height: "30px",
            maxW: "140px",
            color: "techPurple",
          }}
          fullWidth
          open={open}
          onClose={() => setopen(false)}
          onOpen={openHandler}
          value={
            selectedAction.displayName === cachedAction.displayName
              ? cachedAction?.ruleRef?.$refText
              : ""
          }
          size="small"
          onChange={(e) => {
            handleChangeMethod(e.target.value);
          }}
        >
          {AllRulesMap.map((e: Rule) => (
            <MenuItem key={e.$refText} value={e.$refText}>
              {e.$refText}
            </MenuItem>
          ))}
        </Select>

        <Trigger
          position="top-start"
          content={
            currentResource?.content
              ? (currentResource as Resource<RestApiResource<RestApiAuth>>)
                  .content.baseUrl
              : ""
          }
        >
          <div css={urlStyle(theme)}>
            {currentResource?.content
              ? (currentResource as Resource<RestApiResource<RestApiAuth>>)
                  .content.baseUrl
              : ""}
          </div>
        </Trigger>
      </div>
      <div>
        <RecordEditor
          records={content.urlParams}
          label={"Parameters"}
          // onChangeKey={(index, key, v) => {
          // }}
          // onChangeValue={(index, key, v) => {
          // }}
          // onDelete={(index) => {
          // }}
          // onAdd={() => {
          // }}
        />
      </div>
      <BodyEditor actionItem={cachedAction} />
    </div>
  );
};

ImapaktAppsPanel.displayName = "ImapaktAppsPanel";
export default ImapaktAppsPanel;
