import { useState, useEffect } from "react";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import MenuItem from "@mui/material/MenuItem";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import Button from "@mui/material/Button";
import { sendTabMsg } from "../../libs/msg";
import { browser, isExt } from "../../libs/browser";
import { useI18n } from "../../hooks/I18n";
import TextField from "@mui/material/TextField";
import {
  MSG_TRANS_TOGGLE,
  MSG_TRANS_GETRULE,
  MSG_TRANS_PUTRULE,
  OPT_TRANS_ALL,
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
  OPT_STYLE_ALL,
  EVENT_KISS,
  MSG_TRANS_CURRULE,
} from "../../config";

export default function Popup({ setShowPopup }) {
  const i18n = useI18n();
  const [rule, setRule] = useState(null);

  const handleOpenSetting = () => {
    if (isExt) {
      browser?.runtime.openOptionsPage();
    } else {
      window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
    }
    setShowPopup && setShowPopup(false);
  };

  const handleTransToggle = async (e) => {
    try {
      setRule({ ...rule, transOpen: e.target.checked ? "true" : "false" });

      if (isExt) {
        await sendTabMsg(MSG_TRANS_TOGGLE);
      } else {
        window.dispatchEvent(
          new CustomEvent(EVENT_KISS, {
            detail: {
              action: MSG_TRANS_TOGGLE,
            },
          })
        );
      }
    } catch (err) {
      console.log("[toggle trans]", err);
    }
  };

  const handleChange = async (e) => {
    try {
      const { name, value } = e.target;
      setRule((pre) => ({ ...pre, [name]: value }));

      if (isExt) {
        await sendTabMsg(MSG_TRANS_PUTRULE, { [name]: value });
      } else {
        window.dispatchEvent(
          new CustomEvent(EVENT_KISS, {
            detail: {
              action: MSG_TRANS_PUTRULE,
              args: { [name]: value },
            },
          })
        );
      }
    } catch (err) {
      console.log("[update rule]", err);
    }
  };

  const handleKissEvent = (e) => {
    const action = e?.detail?.action;
    const args = e?.detail?.args || {};
    switch (action) {
      case MSG_TRANS_CURRULE:
        setRule(args);
        break;
      default:
      // console.log(`[popup] kissEvent action skip: ${action}`);
    }
  };

  useEffect(() => {
    if (!isExt) {
      window.addEventListener(EVENT_KISS, handleKissEvent);
      window.dispatchEvent(
        new CustomEvent(EVENT_KISS, {
          detail: { action: MSG_TRANS_GETRULE },
        })
      );

      return () => {
        window.removeEventListener(EVENT_KISS, handleKissEvent);
      };
    }

    (async () => {
      try {
        const res = await sendTabMsg(MSG_TRANS_GETRULE);
        if (!res.error) {
          setRule(res.data);
        }
      } catch (err) {
        console.log("[query rule]", err);
      }
    })();
  }, []);

  if (!rule) {
    return (
      <Box minWidth={300} sx={{ p: 2 }}>
        <Stack spacing={3}>
          <Button variant="text" onClick={handleOpenSetting}>
            {i18n("setting")}
          </Button>
        </Stack>
      </Box>
    );
  }

  const { transOpen, translator, fromLang, toLang, textStyle } = rule;

  return (
    <Box minWidth={300} sx={{ p: 2 }}>
      <Stack spacing={2}>
        <FormControlLabel
          control={
            <Switch
              checked={transOpen === "true"}
              onChange={handleTransToggle}
            />
          }
          label={i18n("translate")}
        />

        <TextField
          select
          SelectProps={{ MenuProps: { disablePortal: true } }}
          size="small"
          value={translator}
          name="translator"
          label={i18n("translate_service")}
          onChange={handleChange}
        >
          {OPT_TRANS_ALL.map((item) => (
            <MenuItem key={item} value={item}>
              {item}
            </MenuItem>
          ))}
        </TextField>

        <TextField
          select
          SelectProps={{ MenuProps: { disablePortal: true } }}
          size="small"
          value={fromLang}
          name="fromLang"
          label={i18n("from_lang")}
          onChange={handleChange}
        >
          {OPT_LANGS_FROM.map(([lang, name]) => (
            <MenuItem key={lang} value={lang}>
              {name}
            </MenuItem>
          ))}
        </TextField>

        <TextField
          select
          SelectProps={{ MenuProps: { disablePortal: true } }}
          size="small"
          value={toLang}
          name="toLang"
          label={i18n("to_lang")}
          onChange={handleChange}
        >
          {OPT_LANGS_TO.map(([lang, name]) => (
            <MenuItem key={lang} value={lang}>
              {name}
            </MenuItem>
          ))}
        </TextField>

        <TextField
          select
          SelectProps={{ MenuProps: { disablePortal: true } }}
          size="small"
          value={textStyle}
          name="textStyle"
          label={i18n("text_style")}
          onChange={handleChange}
        >
          {OPT_STYLE_ALL.map((item) => (
            <MenuItem key={item} value={item}>
              {i18n(item)}
            </MenuItem>
          ))}
        </TextField>

        <Button variant="text" onClick={handleOpenSetting}>
          {i18n("setting")}
        </Button>
      </Stack>
    </Box>
  );
}