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>
    );
}