import { Button, Table } from "antd";
import queryString from "query-string";
import React from "react";
import { useTranslation } from "react-i18next";
import { useHistory, useLocation } from "react-router-dom";

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

  const handleOnRowClick = (record) => {
    if (record) {
      search.employeeId = record.id;
      history.push({ search: queryString.stringify(search) });
    } else {
      delete search.employeeId;
      history.push({ search: queryString.stringify(search) });
    }
  };
  const columns = [
    {
      title: t("employees.fields.employee_number"),
      dataIndex: "employee_number",
      key: "employee_number",
    },
    {
      title: t("employees.fields.first_name"),
      dataIndex: "first_name",
      key: "first_name",
    },
    {
      title: t("employees.fields.last_name"),
      dataIndex: "last_name",
      key: "last_name",
    },

    {
      title: t("employees.labels.rate_type"),
      dataIndex: "rate_type",
      key: "rate_type",
      render: (text, record) =>
        record.flat_rate
          ? t("employees.labels.flat_rate")
          : t("employees.labels.straight_time"),
    },
  ];
  return (
    <div>
      <Table
        title={() => {
          return (
            <Button
              type="primary"
              onClick={() => {
                search.employeeId = "new";
                history.push({ 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.push({ search: queryString.stringify(search) });
          },
          type: "radio",
          selectedRowKeys: [search.employeeId],
        }}
        onRow={(record, rowIndex) => {
          return {
            onClick: (event) => {
              handleOnRowClick(record);
            },
          };
        }}
      />
    </div>
  );
}
