import { FC } from "react"
import { useTranslation } from "react-i18next"
import { useDispatch, useSelector } from "react-redux"
import { CodeEditor } from "@/components/CodeEditor"
import { getCachedAction } from "@/redux/config/configSelector"
import { configActions } from "@/redux/config/configSlice"
import Space from "../Layout/Space"
import {
  globalDataPanelContainerStyle,
  inputAreaStyle,
  labelStyle,
  tipsStyle,
} from "./style"
import { GlobalDataActionContent } from "../../../PublicTypes/action/globalData"
import { useTheme } from "@mui/material"
 
const GlobalDataPanel: FC = () => {
  const theme = useTheme()
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const currentAction:any = useSelector(getCachedAction)!
  const { t } = useTranslation()
  const dispatch = useDispatch()

  const handleOnChangeValue = (value: string) => {
    dispatch(
      configActions.updateCachedAction({
        ...currentAction,
        content: {
          initialValue: value,
        },
      }),
    )
  }

  return (
    <>
      <Space />
      <div css={globalDataPanelContainerStyle}>
        <span css={labelStyle(theme)}>
          {t("editor.data_work_space.global_data_modal.initial_value.label")}
        </span>
        <div css={inputAreaStyle}>
          <CodeEditor
            value={
              (currentAction.content as GlobalDataActionContent).initialValue
            }
            height="58px"
            onChange={handleOnChangeValue}
            modalTitle={t(
              "editor.data_work_space.global_data_modal.initial_value.label",
            )}
            modalDescription={t(
              "editor.data_work_space.global_data_modal.initial_value.tooltips",
            )}
            placeholder={t(
              "editor.data_work_space.global_data_modal.initial_value.placeholder",
            )}
          />
          <span css={tipsStyle}>
            {t("editor.action.panel.label.tips.global-data.how-to-use")}
          </span>
        </div>
      </div>
    </>
  )
}

GlobalDataPanel.displayName = "GlobalDataPanel"

export default GlobalDataPanel
