import { GlobalOutlined, ShakeOutlined } from "@ant-design/icons";
import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
import i18n from "i18n/i18n";
import { useTransition } from "react";
import { useDispatch } from "react-redux";
import { useAppSelector } from "redux/hooks";
import ProText from "../ProText";

export function LanguageSwitch() {
  const dispatch = useDispatch();
  const { themeName } = useAppSelector((state) => state.theme);
  const [isPending, startTransition] = useTransition();
  const { isRTL } = useAppSelector((state) => state.locale);

  const changeLanguage = () => {
    startTransition(() => {
      const key: string = isRTL ? "en" : "ar";
      dispatch(setLocale(key));
      // @ts-ignore
      dispatch(setLocalesThunk(key));
      i18n.changeLanguage(key);
    });
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "end",
        padding: "0 16px",
        gap: 10,
        position: "absolute",
        top: "15%",
        [isRTL ? "left" : "right"]: 0,
        marginBottom: "10%",
        zIndex: 1000,
      }}
    >
      <GlobalOutlined
        style={{
          color: themeName === "dark" ? "#fff" : "#434E5C",
          fontSize: 15,
          marginRight: 3,
          cursor: isPending ? "wait" : "pointer",
          opacity: isPending ? 0.7 : 1,
        }}
        onClick={changeLanguage}
      />
      <ProText
        style={{
          color: themeName === "dark" ? "#fff" : "#434E5C",
          fontSize: 14,
          marginRight: 3,
          opacity: isPending ? 0.7 : 1,
          [isRTL ? "marginLeft" : "marginRight"]: 3,
        }}
      >
        {isPending ? "..." : isRTL ? "English" : "Arabic"}
      </ProText>
      <ShakeOutlined
        style={{
          color: themeName === "dark" ? "#fff" : "#434E5C",
          fontSize: 15,
          marginRight: 3,
          [isRTL ? "marginLeft" : "marginRight"]: 3,
        }}
      />
    </div>
  );
}
