import {Button, FloatButton, Input, Result, Switch, Table, Tooltip} from "antd";
import CreateUserModalForm from "../CreateUserModalForm/CreateUserModalForm.jsx";
import UpdateUserModalForm from "../../../../Dummies/UpdateUserModalForm/UpdateUserModalForm.jsx";
import useUsersManageTab from "./useUsersManageTab.js";
import {PlusOutlined} from "@ant-design/icons";
import LoadingIndicator from "../../../../Widgets/LoadingIndicator/LoadingIndicator.jsx";

const UsersManageTab = () => {
    const usersManageTabData = useUsersManageTab();

    const columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "Фамилия",
            dataIndex: "last_name",
            key: "lastName",
            sorter: (a, b) => a.last_name.localeCompare(b.last_name),
        },
        {
            title: "Имя",
            dataIndex: "first_name",
            key: "firstName",
            sorter: (a, b) => a.first_name.localeCompare(b.first_name),
        },
        {
            title: "Отчество",
            dataIndex: "patronymic",
            key: "patronymic",
        },
        {
            title: "Роль",
            dataIndex: ["role", "title"],
            key: "role",
            filters: usersManageTabData.roles.map(role => ({text: role.title, value: role.title})),
            onFilter: (value, record) => record.role.title === value,
        },
        {
            title: "Заблокирован",
            dataIndex: "is_blocked",
            key: "is_blocked",
            render: (value, record) => (
                <Switch
                    loading={usersManageTabData.isBlocking}
                    checked={value}
                    checkedChildren="Заблокирован"
                    unCheckedChildren="Не заблокирован"
                    onChange={(isBlocked) => usersManageTabData.setIsBlockUser(record.id, isBlocked)}
                />
            ),
        },
        {
            title: "Действия",
            key: "actions",
            render: (_, record) => (
                <Button type="link" onClick={() => usersManageTabData.openEditModal(record)}>
                    Редактировать
                </Button>
            ),
        },
    ];

    if (usersManageTabData.isError) {
        return <Result status="500" title="500" subTitle="Произошла ошибка при загрузке данных"/>;
    }

    if (usersManageTabData.isLoading) {
        return <LoadingIndicator/>;
    }

    return (
        <>
            <Input
                placeholder="Введите фамилию, имя или отчество"
                style={{marginBottom: 12}}
                allowClear
                onChange={usersManageTabData.handleSearch}
            />
            <Table
                columns={columns}
                dataSource={usersManageTabData.filteredUsers}
                rowKey="id"
                pagination={{pageSize: 10}}
            />

            <Tooltip title="Добавить пользователя">
                <FloatButton onClick={usersManageTabData.openCreateModal} icon={<PlusOutlined/>} type={"primary"}/>
            </Tooltip>

            <CreateUserModalForm/>
            <UpdateUserModalForm/>
        </>
    )
};

export default UsersManageTab;