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

const SettingsWatchedPaths: FC = () => {
  const [watchedPaths, setWatchedPaths] = useState<string[]>([]);
  const { t } = useTranslation();

  useEffect(() => {
    window.electron.ipcRenderer
      .invoke(ipcTypes.toMain.settings.filepaths.get)
      .then((paths: string[]) => {
        setWatchedPaths(paths);
      });
  }, []);

  const handleAddPath = (): void => {
    window.electron.ipcRenderer
      .invoke(ipcTypes.toMain.settings.filepaths.add)
      .then((paths: string[]) => {
        setWatchedPaths(paths);
      });
  };

  const handleRemovePath = (path: string): void => {
    window.electron.ipcRenderer
      .invoke(ipcTypes.toMain.settings.filepaths.remove, path)
      .then((paths: string[]) => {
        setWatchedPaths(paths);
      });
  };

  return (
    <Card
      title={t("settings.labels.watchedpaths")}
      extra={
        <Button onClick={handleAddPath} icon={<FileAddFilled />}>
          {t("settings.actions.addpath")}
        </Button>
      }
    >
      <Timeline
        items={watchedPaths.map((path, index) => ({
          key: index,
          children: (
            <Space align="baseline">
              {path}
              <Button
                size="small"
                danger
                type="text"
                icon={<DeleteFilled />}
                onClick={() => handleRemovePath(path)}
              />
            </Space>
          ),
        }))}
      />
    </Card>
  );
};
export default SettingsWatchedPaths;
