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 SettingsPpcFilepath: FC = () => {
  const { t } = useTranslation();

  const [ppcFilePath, setPpcFilePath] = useState<string | null>(null);

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

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

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

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