---
# System prepended metadata

title: Untitled

---

import React, { useEffect, useState } from 'react';
import './_style.scss';
import {
    Table,
    Button,
    Form,
    Spin,
    Input,
    Select,
    Modal,
    Pagination,
    Switch,
    Badge,
    Tooltip,
} from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import {
    getListUser,
    deleteUser,
    getDetailUser,
} from 'src/redux/user/user.sagaActions';
import {
    selectListItem,
    selectLoading,
    selectListItemDetail,
} from 'src/redux/user/user.selector';
import * as config from 'src/constants/status.constant';
import VrsAddUser from 'src/components/VrsAddUser';

import { useMediaQuery } from 'react-responsive';
import VrsLoading from 'src/components/VrsLoading';
import { useHistory, useParams } from 'react-router-dom';
import {
    EditTwoTone,
    DeleteTwoTone,
    ProfileTwoTone,
    ExclamationCircleOutlined,
} from '@ant-design/icons';
import UpdateUser from '../../components/UpdateUser';

const { Option } = Select;
const { confirm } = Modal;

const UserManagement = () => {
    const isMobile = useMediaQuery({ query: '(max-width: 1199px)' });
    const [arrProducts, setArrProducts] = useState([]);
    const [data, setData] = useState();
    const [visibleUser, setVisibleUser] = useState(false);
    const [visibleUpdateUser, setVisibleUpdateUser] = useState(false);
    const [visibleFilter, setVisibleFilter] = useState([]);
    const [totalPage, setTotalPage] = useState();
    const [pageCurrent, setPageCurrent] = useState(1);

    let history = useHistory();
    let { id } = useParams();
    const [paramFilter, setParamFilter] = useState({
        page: 1,
        pageSize: 10,
    });

    const dataLoading = useSelector(selectLoading);

    const dispatch = useDispatch();
    const dataList = useSelector(selectListItem);
    const dataListDetail = useSelector(selectListItemDetail);

    useEffect(() => {
        dispatch(
            getListUser({
                page: 1,
                limit: 10,
            })
        );
    }, []);
    useEffect(() => {
        if (dataList && dataList.data && dataList.data.docs) {
            setArrProducts(dataList.data.docs);
            setTotalPage(dataList.data.totalDocs);
        }
    }, [dataList]);
    useEffect(() => {
        if (dataListDetail && dataListDetail.data) {
            setData(dataListDetail.data);
        }
    }, [dataListDetail]);

    function showPropsConfirm(id) {
        console.log('2323', id);
        confirm({
            title: 'Xác nhận yêu cầu',
            icon: <ExclamationCircleOutlined />,
            okText: 'Xóa',
            okType: 'danger',
            cancelText: 'Không',
            onOk() {
                if (id) {
                    dispatch(deleteUser(id));
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    const fetchRecords = (page) => {
        dispatch(
            getListUser({
                page: page,
                limit: 10,
                // litmit: 10,
            })
        );
        setPageCurrent(page);
    };
    function UpdateAccountUser(id) {
        dispatch(getDetailUser(id));
        setVisibleUpdateUser(true);
    }

    const onChangePagination = (current) => {
        dispatch(
            getListUser({
                page: current,
                limit: 10,
            })
        );
        setPageCurrent(current);
    };
    const columns = [
        {
            title: 'Họ và tên',
            dataIndex: 'name',
        },
        {
            title: 'Tên tài khoản',
            dataIndex: 'username',
        },
        {
            title: 'Email',
            dataIndex: 'email',
        },
        {
            title: 'Vai trò',
            dataIndex: 'roles',
            render: (roles) => {
                return (
                    <div>
                        {roles &&
                            roles.map((item, idx) => {
                                return <div key={idx}>{item.name}</div>;
                            })}
                    </div>
                );
            },
        },

        {
            title: 'Hành động',
            dataIndex: 'id',
            render: (id) => {
                return (
                    <div>
                        <div className="icon-action">
                            <Tooltip placement="top" title="Sửa">
                                <Button
                                    onClick={() => {
                                        UpdateAccountUser(id);
                                    }}
                                    className="bg-bluez text-white">
                                    Sửa
                                </Button>
                            </Tooltip>
                            <Tooltip placement="top" title="Xóa">
                                <Button
                                    type="link"
                                    onClick={() => {
                                        showPropsConfirm(id);
                                    }}>
                                    Xóa
                                </Button>
                            </Tooltip>
                        </div>
                    </div>
                );
            },
        },
    ];

    function onChangeFilter(selectedOption) {
        let arrFilter = [...visibleFilter];
        let itemFilter = arrFilter.includes(selectedOption);
        if (!itemFilter) {
            arrFilter.push(selectedOption);
        }
        setVisibleFilter(arrFilter);
    }

    function onChange(pagination, filters, sorter, extra) {
        console.log('Various parameters', pagination, filters, sorter, extra);
    }
    const removeUpdateModal = () => {
        setVisibleUpdateUser(false);
    };
    const removeModal = () => {
        setVisibleUser(false);
    };

    const onFinsish = (fieldValue) => {
        let obj = {
            page: pageCurrent,
            limit: 10,
        };

        if (fieldValue.username) {
            obj.username = fieldValue.username;
        }
        if (fieldValue.email) {
            obj.email = fieldValue.email;
        }
        if (fieldValue.name) {
            obj.name = fieldValue.name;
        }
        dispatch(getListUser(obj));
    };


    return (
        <div className="user-management">
            <div className="titles">QUẢN LÝ NGƯỜI DÙNG</div>
            <div className="box-update-datas mb-20">
                <Form layout="vertical" onFinish={onFinsish}>
                    <p className="mt-15">Tìm kiếm</p>
                    <div className="row">
                        <div className="col-md-4">
                            <Form.Item name="username">
                                <Input placeholder="Nhập tên tài khoản" />
                            </Form.Item>
                        </div>

                        <div className="col-md-4">
                            <Form.Item name="email">
                                <Input placeholder="Email" />
                            </Form.Item>
                        </div>

                        <div className="col-md-4">
                            <Form.Item name="name">
                                <Input placeholder="Nhập họ tên" />
                            </Form.Item>
                        </div>

                        <div className="col-md-4">
                            <Button
                                className="text-white bg-bluez font-bold border-bluez"
                                htmlType='submit'
                            >
                                Tìm kiếm
                            </Button>
                        </div>
                    </div>
                </Form>
            </div>
            <Modal
                centered
                visible={visibleUpdateUser}
                onOk={() => setVisibleUpdateUser(false)}
                onCancel={() => setVisibleUpdateUser(false)}
                width={800}
                footer={null}
                closable={false}
                className="form-update-user">
                <Spin spinning={dataLoading} indicator={VrsLoading}>
                    <UpdateUser
                        data={data && data}
                        callbackUpdateRemove={removeUpdateModal}
                    />
                </Spin>
            </Modal>
            <div className="box-update-data">
                <div className="box-btn">
                    <Button
                        className="bg-bluez text-white"
                        onClick={() => setVisibleUser(true)}>
                        Thêm thành viên
                    </Button>
                </div>
            </div>
            <div className="table-list-product">
                <Table
                    columns={columns}
                    dataSource={arrProducts}
                    onChange={onChange}
                    scroll={{ x: true }}
                    rowKey="id"
                    pagination={false}
                    // pagination={{
                    //     total: totalPage,
                    //     pageSize: 10,
                    //     current: pageCurrent,
                    //     onChange: (page) => {
                    //         fetchRecords(page);
                    //     },
                    // }}
                    loading={{ indicator: VrsLoading, spinning: dataLoading }}
                />
                <Pagination
                    onChange={onChangePagination}
                    total={totalPage}
                    pageSize={10}
                    current={pageCurrent}
                />
            </div>
            <Modal
                centered
                visible={visibleUser}
                onOk={() => setVisibleUser(false)}
                onCancel={() => setVisibleUser(false)}
                width={800}
                footer={null}
                closable={false}
                className="form-update-user">
                <VrsAddUser callbackRemove={removeModal} />
            </Modal>
        </div>
    );
};
UserManagement.propTypes = {};

export default UserManagement;
