import { Empty, Flex, List, Typography } 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.fileWatcher.toMain.filepathsGet);
  }, []);

  return (
    <div className="settings-filepaths">
      <Flex align="center" justify="space-between" gap="small" wrap className="settings-filepaths__header">
        <div>
          <Typography.Title level={3}>Watcher File Paths</Typography.Title>
          <Typography.Text type="secondary">
            {watchedPaths && watchedPaths.length
              ? `${watchedPaths.length} path${watchedPaths.length === 1 ? "" : "s"} being watched`
              : "Choose the folders the watcher should monitor."}
          </Typography.Text>
        </div>
        <FilepathAddMolecule size="small" type="primary" />
      </Flex>
      <List
        className="settings-filepaths__list"
        size="small"
        dataSource={watchedPaths || []}
        renderItem={FilepathItemMolecule}
        locale={{
          emptyText: (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description="No watched folders yet"
            />
          ),
        }}
      />
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(FilePathsList);
