import { DownloadOutlined, SyncOutlined } from "@ant-design/icons";
import { Button, Card, Input, Space } from "antd";
import axios from "axios";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { selectPartnerVersion } from "../../redux/application/application.selectors";
import { alphaSort } from "../../utils/sorters";
import { logImEXEvent } from "../../firebase/firebase.utils.js";
import ResponsiveTable from "../responsive-table/responsive-table.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  partnerVersion: selectPartnerVersion
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsAvailableScan);

export function JobsAvailableScan({ partnerVersion, refetch }) {
  const [estimatesOnDisk, setEstimatesOnDisk] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searchText, setSearchText] = useState("");
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" }
  });
  const { t } = useTranslation();
  const notification = useNotification();

  const handleTableChange = (pagination, filters, sorter) => {
    logImEXEvent("available_jobs_scan_sort_filter", { pagination, filters, sorter });

    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };

  const handleImport = async (filepath) => {
    setLoading(true);
    logImEXEvent("available_jobs_scan", {});

    const response = await axios.post("http://localhost:1337/import/", {
      filepath
    });
    if (response.data.success) {
      //Came through
      if (refetch) refetch();
    } else {
      notification.error({
        title: t("jobs.errors.scanimport", { message: response.data.error })
      });
    }
    setLoading(false);
  };

  const columns = [
    {
      title: t("jobs.fields.cieca_id"),
      dataIndex: "cieca_id",
      key: "cieca_id",
      sorter: (a, b) => alphaSort(a, b),
      sortOrder: state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.owner"),
      dataIndex: "owner",
      key: "owner",
      ellipsis: true,
      sorter: (a, b) => alphaSort(a.owner, b.owner),
      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.vehicle"),
      dataIndex: "vehicle",
      key: "vehicle",
      sorter: (a, b) => alphaSort(a.vehicle, b.vehicle),
      sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.clm_no"),
      dataIndex: "clm_no",
      key: "clm_no",
      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
      sortOrder: state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
    },
    {
      title: t("jobs.fields.ins_co_nm"),
      dataIndex: "ins_co_nm",
      key: "ins_co_nm",
      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
      sortOrder: state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order
    },
    {
      title: t("general.labels.actions"),
      key: "actions",
      render: (text, record) => <Button icon={<DownloadOutlined />} onClick={() => handleImport(record.filepath)} />
    }
  ];

  const scanEstimates = async () => {
    setLoading(true);
    const estimatesOnDiskResponse = await axios.post("http://localhost:1337/scan/");
    setEstimatesOnDisk(estimatesOnDiskResponse.data);
    setLoading(false);
  };

  const data = estimatesOnDisk
    ? searchText
      ? estimatesOnDisk.filter(
          (j) =>
            (j.owner || "").toLowerCase().includes(searchText.toLowerCase()) ||
            (j.vehicle || "").toLowerCase().includes(searchText.toLowerCase()) ||
            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase())
        )
      : estimatesOnDisk
    : [];

  return (
    <Card
      title={t("jobs.labels.diskscan")}
      extra={
        <Space wrap>
          <Button
            icon={<SyncOutlined />}
            loading={loading}
            disabled={!partnerVersion}
            onClick={() => {
              scanEstimates();
            }}
            id="scan-estimates-button"
          />

          <Input.Search
            placeholder={t("general.labels.search")}
            onChange={(e) => {
              setSearchText(e.currentTarget.value);
            }}
            enterButton
          />
        </Space>
      }
    >
      <ResponsiveTable
        loading={loading}
        pagination={{ placement: "top" }}
        columns={columns}
        mobileColumnKeys={["cieca_id", "owner", "vehicle", "actions"]}
        rowKey="id"
        dataSource={data}
        onChange={handleTableChange}
      />
    </Card>
  );
}
