import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory, useLocation } from "react-router-dom";
import { DateFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";

export default function CsiResponseListPaginated({
  refetch,
  loading,
  responses,
  total,
}) {
  const search = queryString.parse(useLocation().search);
  const { responseid, page, sortcolumn, sortorder } = search;
  const history = useHistory();
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" },
  });

  const { t } = useTranslation();
  const columns = [
    {
      title: t("jobs.fields.ro_number"),
      dataIndex: "ro_number",
      key: "ro_number",
      width: "8%",
      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
      sortOrder: sortcolumn === "ro_number" && sortorder,

      render: (text, record) => (
        <Link to={"/manage/jobs/" + record.job.id}>
          {record.job.ro_number || t("general.labels.na")}
        </Link>
      ),
    },
    {
      title: t("jobs.fields.owner"),
      dataIndex: "owner",
      key: "owner",
      ellipsis: true,
      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
      width: "25%",
      sortOrder: sortcolumn === "owner" && sortorder,
      render: (text, record) => {
        return record.job.owner ? (
          <Link to={"/manage/owners/" + record.job.owner.id}>
            <OwnerNameDisplay ownerObject={record.job} />
          </Link>
        ) : (
          <span>
            <OwnerNameDisplay ownerObject={record.job} />
          </span>
        );
      },
    },
    {
      title: t("csi.fields.completedon"),
      dataIndex: "completedon",
      key: "completedon",
      ellipsis: true,
      sorter: (a, b) => a.completedon - b.completedon,
      width: "25%",
      sortOrder: sortcolumn === "completedon" && sortorder,
      render: (text, record) => {
        return record.completedon ? (
          <DateFormatter>{record.completedon}</DateFormatter>
        ) : null;
      },
    },
  ];

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
    search.page = pagination.current;
    search.sortcolumn = sorter.columnKey;
    search.sortorder = sorter.order;
    history.push({ search: queryString.stringify(search) });
  };

  const handleOnRowClick = (record) => {
    if (record) {
      if (record.id) {
        search.responseid = record.id;
        history.push({ search: queryString.stringify(search) });
      }
    } else {
      delete search.responseid;
      history.push({ search: queryString.stringify(search) });
    }
  };

  return (
    <Card
      extra={
        <Button onClick={() => refetch()}>
          <SyncOutlined />
        </Button>
      }
    >
      <Table
        loading={loading}
        pagination={{
          position: "top",
          pageSize: 25,
          current: parseInt(page || 1),
          total: total,
        }}
        columns={columns}
        rowKey="id"
        dataSource={responses}
        onChange={handleTableChange}
        rowSelection={{
          onSelect: (record) => {
            handleOnRowClick(record);
          },
          selectedRowKeys: [responseid],
          type: "radio",
        }}
        onRow={(record, rowIndex) => {
          return {
            onClick: (event) => {
              handleOnRowClick(record);
            }, // click row
          };
        }}
      />
    </Card>
  );
}
