import React, {
  useMemo,
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
} from "react";
import styles from "./entry.module.scss";
import "./style/global.less";
import Easy from "./pages/Alarm/components/easy";
import Complex from "./pages/Alarm/components/complex";
import Detail from "./pages/Alarm/components/detail";
import { getAntdToken } from "./utils/theme";
import ThemeWrapper from "./utils/theme/ThemeWrapper";
import { ConfigProvider, App } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import "./utils/theme/customStyle.less";
import "dayjs/locale/zh-cn";
import dayjs from "dayjs";
dayjs.locale("zh-cn");

const EasyConfig = forwardRef((props, ref) => {
  const { editId = -1, onConfirm, groupList, pointId, readonly, style } = props;
  const compRef = useRef(null);

  const [themeName, setThemeName] = useState();

  const antdToken = useMemo(() => {
    if (themeName) {
      return getAntdToken(themeName);
    }
  }, [themeName]);

  useImperativeHandle(ref, () => {
    return {
      ok: compRef?.current?.ok,
    };
  });

  return (
    <ThemeWrapper setThemeName={setThemeName}>
      {themeName && (
        <ConfigProvider
          locale={zhCN}
          theme={antdToken}
          autoInsertSpaceInButton={false}
        >
          <App className={styles.App}>
            <Easy
              ref={compRef}
              editId={editId}
              pointId={pointId}
              onConfirm={onConfirm}
              groupList={groupList}
              readonly={readonly}
              style={style}
            />
          </App>
        </ConfigProvider>
      )}
    </ThemeWrapper>
  );
});

const ComplexConfig = forwardRef((props, ref) => {
  const { editId = -1, onConfirm, groupList, showList, style, rightStyle } = props;
  const compRef = useRef(null);

  const [themeName, setThemeName] = useState();

  const antdToken = useMemo(() => {
    if (themeName) {
      return getAntdToken(themeName);
    }
  }, [themeName]);

  useImperativeHandle(ref, () => {
    return {
      ok: compRef?.current?.ok,
    };
  });

  return (
    <ThemeWrapper setThemeName={setThemeName}>
      {themeName && (
        <ConfigProvider
          locale={zhCN}
          theme={antdToken}
          autoInsertSpaceInButton={false}
        >
          <App className={styles.App}>
            <Complex
              ref={compRef}
              editId={editId}
              onConfirm={onConfirm}
              groupList={groupList}
              showList={showList}
              style={style}
              rightStyle={rightStyle}
            />
          </App>
        </ConfigProvider>
      )}
    </ThemeWrapper>
  );
});

const DetailModal = (props) => {
  const [themeName, setThemeName] = useState();

  const antdToken = useMemo(() => {
    if (themeName) {
      return getAntdToken(themeName);
    }
  }, [themeName]);

  return (
    <ThemeWrapper setThemeName={setThemeName}>
      {themeName && (
        <ConfigProvider
          locale={zhCN}
          theme={antdToken}
          autoInsertSpaceInButton={false}
        >
          <App className={styles.App}>
            <Detail {...props} />
          </App>
        </ConfigProvider>
      )}
    </ThemeWrapper>
  );
};

export default {
  EasyConfig,
  ComplexConfig,
  DetailModal,
};