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;