import { Button, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import { alphaSort } from "../../utils/sorters";

export default function ShopEmployeesListComponent({ loading, employees }) {
  const { t } = useTranslation();
  const history = useNavigate();
  const search = queryString.parse(useLocation().search);

  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" }
  });

  const handleOnRowClick = (record) => {
    if (record) {
      search.employeeId = record.id;
      history({ search: queryString.stringify(search) });
    } else {
      delete search.employeeId;
      history({ search: queryString.stringify(search) });
    }
  };
  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };
  const columns = [
    {
      title: t("employees.fields.employee_number"),
      dataIndex: "employee_number",
      key: "employee_number",
      sorter: (a, b) => alphaSort(a.employee_number, b.employee_number),
      sortOrder: state.sortedInfo.columnKey === "employee_number" && state.sortedInfo.order
    },
    {
      title: t("employees.labels.name"),
      dataIndex: "employee_name",
      key: "employee_name",
      sorter: (a, b) =>
        alphaSort(
          `${a.first_name || ""} ${a.last_name || ""}`.trim(),
          `${b.first_name || ""} ${b.last_name || ""}`.trim()
        ),
      sortOrder: state.sortedInfo.columnKey === "employee_name" && state.sortedInfo.order,
      render: (text, record) => `${record.first_name || ""} ${record.last_name || ""}`.trim()
    },
    {
      title: t("employees.labels.rate_type"),
      dataIndex: "rate_type",
      key: "rate_type",
      sorter: (a, b) => Number(a.flat_rate) - Number(b.flat_rate),
      sortOrder: state.sortedInfo.columnKey === "rate_type" && state.sortedInfo.order,
      filters: [
        {
          text: t("employees.labels.flat_rate"),
          value: true
        },
        {
          text: t("employees.labels.straight_time"),
          value: false
        }
      ],
      onFilter: (value, record) => value === record.flate_rate,
      render: (text, record) =>
        record.flat_rate ? t("employees.labels.flat_rate") : t("employees.labels.straight_time")
    },
    {
      title: t("employees.labels.status"),
      dataIndex: "active",
      key: "active",
      sorter: (a, b) => Number(a.active) - Number(b.active),
      sortOrder: state.sortedInfo.columnKey === "active" && state.sortedInfo.order,
      filters: [
        {
          text: t("employees.labels.active"),
          value: true
        },
        {
          text: t("employees.labels.inactive"),
          value: false
        }
      ],
      onFilter: (value, record) => value === record.active,
      render: (text, record) => (record.active ? t("employees.labels.active") : t("employees.labels.inactive"))
    }
  ];
  return (
    <div>
      <Table
        title={() => {
          return (
            <Button
              type="primary"
              onClick={() => {
                search.employeeId = "new";
                history({ search: queryString.stringify(search) });
              }}
            >
              {t("employees.actions.new")}
            </Button>
          );
        }}
        loading={loading}
        pagination={{ position: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={employees}
        rowSelection={{
          onSelect: (props) => {
            search.employeeId = props.id;
            history({ search: queryString.stringify(search) });
          },
          type: "radio",
          selectedRowKeys: [search.employeeId]
        }}
        onChange={handleTableChange}
        onRow={(record, rowIndex) => {
          return {
            onClick: (event) => {
              handleOnRowClick(record);
            }
          };
        }}
      />
    </div>
  );
}
