import { Button, Input, Table } from "antd";
import { antdMessage as message } from "../../../util/antdFeedback";
import React, { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ipcTypes from "../../../ipc.types";
import {
  selectScanEstimates,
  selectScanLoading,
} from "../../../redux/scan/scan.selectors";
import { alphaSort } from "../../../util/sorters";
import DeleteAllEmsAtom from "../../atoms/delete-all-ems/delete-all-ems.atom";
import LastScannedAtom from "../../atoms/last-scanned/last-scanned.atom";
import ScanRefreshAtom from "../../atoms/scan-refresh/scan-refresh.atom";

const { ipcRenderer } = window;
const mapStateToProps = createStructuredSelector({
  scanLoading: selectScanLoading,
  estimates: selectScanEstimates,
});
const mapDispatchToProps = (dispatch) => ({});

export function ScanEstimateListMolecule({ scanLoading, estimates }) {
  const [searchText, setSearchText] = useState("");

  const columns = [
    {
      title: "Claim No.",
      dataIndex: "clm_no",
      key: "clm_no",
      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
    },
    {
      title: "Ins Co.",
      dataIndex: "ins_co_nm",
      key: "ins_co_nm",
      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
    },
    {
      title: "Last Name",
      dataIndex: "ownr_ln",
      key: "ownr_ln",
      defaultSortOrder: "ascend",
      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
    },
    {
      title: "First Name",
      dataIndex: "ownr_fn",
      key: "ownr_fn",
      sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
    },

    {
      title: "Vehicle",
      dataIndex: "vehicle",
      key: "vehicle",
      render: (text, record) =>
        `${record.v_model_yr} ${record.v_makedesc} ${record.v_model} (${record.v_type})`,
    },
    {
      title: "File Path",
      dataIndex: "filepath",
      key: "filepath",
    },
    {
      title: "Import",
      dataIndex: "import",
      key: "import",
      render: (text, record) => (
        <Button
          onClick={() => {
            message.info("Attempting to import job...");
            ipcRenderer.send(
              ipcTypes.fileScan.toMain.importJob,
              record.filepath
            );
          }}
        >
          Import
        </Button>
      ),
    },
  ];

  const data =
    searchText !== ""
      ? estimates.filter(
          (j) =>
            j.v_makedesc.toLowerCase().includes(searchText.toLowerCase()) ||
            j.v_model.toLowerCase().includes(searchText.toLowerCase()) ||
            j.ownr_fn.toLowerCase().includes(searchText.toLowerCase()) ||
            j.ownr_ln.toLowerCase().includes(searchText.toLowerCase()) ||
            j.clm_no.toLowerCase().includes(searchText.toLowerCase())
        )
      : estimates;

  return (
    <div>
      <Table
        title={() => (
          <div className="imex-table-header">
            <ScanRefreshAtom />
            <LastScannedAtom />
            <DeleteAllEmsAtom />
            <Input.Search
              className="imex-table-header__search"
              placeholder="Search"
              onSearch={(val) => {
                setSearchText(val);
              }}
              enterButton
              allowClear
            />
          </div>
        )}
        columns={columns}
        rowKey="filepath"
        loading={scanLoading}
        size="small"
        pagination={false}
        dataSource={data}
        scroll={{
          x: true,
        }}
      />
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScanEstimateListMolecule);
