import { useState, Fragment, useRef } from 'react';
import { Title, FormWrapper } from '../../styles/Components';
import { useNavigate } from 'react-router-dom';
import {
	CommonSearchBar,
	useCommonSearch,
	UserBlockDetailModal,
} from '../../components/ServiceManage/';
import { BlackListDetail, BlackListDelete } from '../../apis';
import Pagination from '../../components/common/Pagination/Pagination';

import { authType } from '../../assets/data';
import { CaliTable, TableHeader } from '../../components/common';
import { useModal, useTable, withAuth } from '../../hooks/hook';
import { alertTypes } from '../../assets/data/types';
import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
import tableInfo from '../../assets/data/pages/userBlockTable.json'
import { useAlert } from '../../context/AlertProvider';
import { useLoading } from '../../context/LoadingProvider';

const UserBlock = () => {
	const token = sessionStorage.getItem('token');
	const navigate = useNavigate();
	const {showModal, showToast} = useAlert();
	const {withLoading} = useLoading();

	const [detail, setDetail] = useState([]);
	const {
		modalState,
		handleModalView,
		handleModalClose
	} = useModal({
		detail: 'hidden',
	});


	const {
		config,
		searchParams,
		data: dataList,
		handleSearch,
		handleReset,
		handlePageChange,
		handlePageSizeChange,
		handleOrderByChange,
		updateSearchParams,
		configLoaded
	} = useCommonSearch(token, "userBlockSearch");

	const {
		selectedRows,
		handleSelectRow,
		isRowSelected
	} = useTable(dataList?.list || [], {mode: 'single'});

	const handleAction = async (action, item = null) => {
		switch (action) {
			case "detail":
				await BlackListDetail(token, item.id).then(data => {
					setDetail(data);
					handleModalView('detail');
				});
				break;
			case "delete":
				showModal('USER_BLOCK_DELETE_CONFIRM', {
					type: alertTypes.confirm,
					onConfirm: () => handleAction('deleteConfirm')
				});
				break;
			case "deleteConfirm":
				let list = [];

				selectedRows.map(data => {
					list.push({
						id: data.id,
					});
				});

				await withLoading(async () => {
					return BlackListDelete(token, list);
				}).then(data => {
					showToast('DEL_COMPLETE', {type: alertTypes.success});
				}).catch(reason => {
					showToast('API_FAIL', {type: alertTypes.error});
				}).finally(() => {
					handleSearch(updateSearchParams);
				});

				break;

		}
	};

	return (
		<>
			<Title>이용자 제재 조회 및 등록</Title>
			<FormWrapper>
				<CommonSearchBar
					config={config}
					searchParams={searchParams}
					onSearch={(newParams, executeSearch = true) => {
						if (executeSearch) {
							handleSearch(newParams);
						} else {
							updateSearchParams(newParams);
						}
					}}
					onReset={handleReset}
				/>
			</FormWrapper>
			<TableHeader
				config={tableInfo.header}
				total={dataList?.total}
				total_all={dataList?.total_all}
				handleOrderBy={handleOrderByChange}
				handlePageSize={handlePageSizeChange}
				selectedRows={selectedRows}
				onAction={handleAction}
				navigate={navigate}
			/>
			<CaliTable
				columns={tableInfo.columns}
				data={dataList?.list}
				selectedRows={selectedRows}
				onSelectRow={handleSelectRow}
				onAction={handleAction}
			/>
			<Pagination
				postsPerPage={searchParams.pageSize}
				totalPosts={dataList?.total_all}
				setCurrentPage={handlePageChange}
				currentPage={searchParams.currentPage}
				pageLimit={INITIAL_PAGE_LIMIT}
			/>

			<UserBlockDetailModal
				stateModal={modalState.detailModal}
				data={detail}
				handleModal={() => handleModalClose('detail')}
			/>
		</>
	);
};

export default withAuth(authType.blackListRead)(UserBlock);