import { FolderOpenFilled } from "@ant-design/icons";
import { Button, Card, Input, Space } from "antd";
import { useEffect, useState, FC } from "react";
import { useTranslation } from "react-i18next";
import ipcTypes from "../../../../util/ipcTypes.json";

const SettingsEmsOutFilePath: FC = () => {
  const { t } = useTranslation();

  const [emsFilePath, setEmsFilePath] = useState<string | null>(null);

  const getPollingStateFromStore = (): void => {
    window.electron.ipcRenderer
      .invoke(ipcTypes.toMain.settings.getEmsOutFilePath)
      .then((filePath: string | null) => {
        setEmsFilePath(filePath);
      });
  };

  //Get state first time it renders.
  useEffect(() => {
    getPollingStateFromStore();
  }, []);

  const handlePathChange = (): void => {
    window.electron.ipcRenderer
      .invoke(ipcTypes.toMain.settings.setEmsOutFilePath)
      .then((filePath: string | null) => {
        setEmsFilePath(filePath);
      });
  };

  return (
    <Card title={t("settings.labels.emsOutFilePath")}>
      <Space wrap>
        <Input
          value={emsFilePath || ""}
          placeholder={t("settings.labels.emsOutFilePath")}
          disabled
        />
        <Button onClick={handlePathChange} icon={<FolderOpenFilled />} />
      </Space>
    </Card>
  );
};
export default SettingsEmsOutFilePath;
