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

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

  const handleOnRowClick = (record) => {
    if (record) {
      search.employeeTeamId = record.id;
      history({ search: queryString.stringify(search) });
    } else {
      delete search.employeeTeamId;
      history({ search: queryString.stringify(search) });
    }
  };
  const columns = [
    {
      title: t("employee_teams.fields.name"),
      dataIndex: "name",
      key: "name"
    }
  ];

  return (
    <div>
      <Table
        title={() => {
          return (
            <Button
              type="primary"
              onClick={() => {
                search.employeeTeamId = "new";
                history({ search: queryString.stringify(search) });
              }}
            >
              {t("employee_teams.actions.new")}
            </Button>
          );
        }}
        loading={loading}
        pagination={{ position: "top" }}
        columns={columns}
        rowKey="id"
        dataSource={employee_teams}
        rowSelection={{
          onSelect: (props) => {
            search.employeeTeamId = props.id;
            history({ search: queryString.stringify(search) });
          },
          type: "radio",
          selectedRowKeys: [search.employeeTeamId]
        }}
        onRow={(record, rowIndex) => {
          return {
            onClick: (event) => {
              handleOnRowClick(record);
            }
          };
        }}
      />
    </div>
  );
}
