import { List } from "antd";
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ipcTypes from "../../../ipc.types";
import { selectWatchedPaths } from "../../../redux/application/application.selectors";
import FilepathAddMolecule from "../../molecules/filepath-add/filepath-add.molecule";
import FilepathItemMolecule from "../../molecules/filepath-item/filepath-item.molecule";
const { ipcRenderer } = window;

const mapStateToProps = createStructuredSelector({
  watchedPaths: selectWatchedPaths,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function FilePathsList({ watchedPaths }) {
  //On Rdner, send request to get file paths to main.
  useEffect(() => {
    ipcRenderer.send(ipcTypes.default.fileWatcher.toMain.filepathsGet);
  }, []);

  console.log("watchedPaths", watchedPaths);
  return (
    <div>
      File Paths
      <List dataSource={watchedPaths || []} renderItem={FilepathItemMolecule} />
      <FilepathAddMolecule />
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(FilePathsList);
