import { Box, Button, Checkbox, Flex, Input, InputGroup, InputRightElement, Stack, Table, Tbody, Td, Text, Th, Thead, Tr, useQuery, useToast } from '@chakra-ui/react';
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
import {
	Pagination,
	PaginationContainer,
	PaginationNext,
	PaginationPage,
	PaginationPageGroup,
	PaginationPrevious,
	PaginationSeparator,
	usePagination } from "@ajna/pagination";
import React, { useEffect, useState } from 'react';
import { __ } from "@wordpress/i18n";
import { SearchIcon } from '@chakra-ui/icons';
import { Select } from 'chakra-react-select';
import { bulkAssignPermission, bulkRemoveManager, getManagers, getWPRoles, removeManager } from './RoleAndPermissionAPI';
import TrashUserRoleModel from './TrashUserRoleModel';
import UserDisplayModal from './UserDisplayModal';
import { debounce } from "lodash";

const UserRoleTable = () => {

	const [isAllChecked, setIsAllChecked] = useState(false);
	const [evfPermission, setEvfPermission] = useState([]);
	const [checkedItems, setCheckedItems] = useState({});
	const [firstLoad,setFirstLoad] = useState(true);

	const [managers, setManagers] = useState([]);
	const [permissions, setPermissions] = useState([]);
	const [wpRoles, setWPRoles] = useState([]);
	const [userDeleted, setUserDeleted] = useState(false);
	const [selectedRows, setSelectedRows] = useState([]);
	const [bulkDelete, setBulkDelete] = useState(false);
	const [bulkDeleteSuccess, setBulkDeleteSuccess] = useState();
	const [searchManager, setSearchManager] = useState("");
	const [userAdded, setUserAdded] = useState(false);
	const toast = useToast();

	const [totalManagers, setTotalManagers] = useState(0);
	const mappedOptions = [
		{ label: 5, value: 5 },
		{ label: 10, value: 10 },
		{ label: 25, value: 25 },
		{ label: 50, value: 50 },
	];

	const outerLimit = 2;
	const innerLimit = 2;

	const {
		pages,
		pagesCount,
		offset,
		currentPage,
		setCurrentPage,
		isDisabled,
		pageSize,
		setPageSize,
	} = usePagination({
		total: totalManagers,
		limits: {
			outer: outerLimit,
			inner: innerLimit,
		},
		initialState: {
			pageSize: 5,
			isDisabled: false,
			currentPage: 1,
		},
	});


	const handlePageChange = (nextPage) => {
		setCurrentPage(nextPage);
	};

	const handlePageSizeChange = ( selectedOption ) => {
		const pageSize = Number( selectedOption .value);
		setPageSize(pageSize);
	};

	const debounceSearch = debounce((val) => {
		setCurrentPage(1);
		setSearchManager(val);
	}, 800);

	useEffect(()=>{
		getManagers( offset, pageSize, searchManager ).then((res)=> {
			if ( res.success ) {
				setUserAdded(false);
				setUserDeleted(false);
				setManagers( res.managers );
				setTotalManagers(res.total)
				setPermissions( res.permissions.permissions);
			}

		})
	},[currentPage, pageSize, offset, userDeleted, bulkDeleteSuccess, searchManager, userAdded]);

	useEffect(() => {
	  getWPRoles().then((res) => {
		setWPRoles(res.data.roles);
	  });
	}, []);

	const deleteManager = (userID) => {
	  removeManager(userID).then((res) => {
		if (res.success) {
		  setUserDeleted(true);
		  toast({
			title: res.message,
			status: "success",
			duration: 3000,
		  });
		}
	  });
	};

	const handleSelectAll = (isChecked) => {
	  if (isChecked) {
		setSelectedRows(managers.map((manager) => manager.id));
	  } else {
		setSelectedRows([]);
	  }
	};

	const handleSelectRow = (id, isChecked) => {
	  setSelectedRows((prevSelected) =>
		isChecked ? [...prevSelected, id] : prevSelected.filter((rowId) => rowId !== id)
	  );
	};

	const isAllSelected = managers.length > 0 && selectedRows.length === managers.length;
	const isIndeterminate = selectedRows.length > 0 && selectedRows.length < managers.length;

	const handleCheckAll = (e) => {
		setFirstLoad(false);
		const checked = e.target.checked;
		setIsAllChecked(checked);

		const updatedCheckedItems = Object.keys(wpRoles).reduce((acc, role) => {
		  acc[role] = checked;
		  return acc;
		}, {});

		setCheckedItems(updatedCheckedItems);

		bulkAssignPermission(updatedCheckedItems).then((res) => {
		  if (res.success) {
			toast({
			  title: res.message,
			  status: "success",
			  duration: 3000,
			});
		  } else {
			toast({
			  title: res.message || "Something went wrong",
			  status: "error",
			  duration: 3000,
			});
		  }
		});
	  };

	  const handleIndividualCheck = (role, isChecked) => {
		setFirstLoad(false);
		const updatedCheckedItems = {
		  ...checkedItems,
		  [role]: isChecked,
		};
		setCheckedItems(updatedCheckedItems);

		bulkAssignPermission(updatedCheckedItems).then((res) => {
		  if (res.success) {
			toast({
			  title: res.message,
			  status: "success",
			  duration: 3000,
			});
		  } else {
			toast({
			  title: res.message || "Something went wrong",
			  status: "error",
			  duration: 3000,
			});
		  }
		});

		const allChecked = Object.values(updatedCheckedItems).every((item) => item);
		setIsAllChecked(allChecked);
	  };

	  useEffect(() => {
		getWPRoles().then((res) => {
		  setWPRoles(res.data.roles);
		  setEvfPermission(res.data.permission.permissions);

		  const initialCheckedItems = Object.keys(res.data.roles).reduce((acc, role) => {
			acc[role] = res.data.roles[role].checked;
			return acc;
		  }, {});
		  setCheckedItems(initialCheckedItems);
		});
	  }, []);

	const handleBulkDelete = () => {

		if ( selectedRows.length === 0 ) {
			toast({
				title: "Please select user.",
				status: 'error',
				duration: 3000
			})
		}else if ( !bulkDelete ) {
			toast({
				title: "Please choose bulk action.",
				status: 'error',
				duration: 3000
			})
		}else if( bulkDelete && selectedRows.length != 0 ){
			bulkRemoveManager( selectedRows ).then( (res) => {
				if ( res.success ) {
					toast({
						title: res.message,
						status: 'success',
						duration: 3000
					})

					setBulkDeleteSuccess(true);
					setSelectedRows([]);
				}else{
					toast({
						title: res.message,
						status: 'error',
						duration: 3000
					})
				}
			})
		}
	}

	return (
	  <Stack gap={"20px"}>
		{/* Role Based */}
		<Box>
			<Flex justifyContent={"space-between"}>
				<Stack>
				<Text fontSize={"16px"} fontWeight="bold" height={"21px"} margin={"0"}>
					Role Based
				</Text>
				<Text fontSize={"14px"} fontWeight="normal" height={"21px"} margin={"0"}>
					By selecting additional roles below, you can give access to other user roles.
				</Text>
				</Stack>
				<Stack>
				<UserDisplayModal wp_roles={evfPermission} setUserAdded={setUserAdded} />
				</Stack>
			</Flex>

			<Stack margin={"24px 0px"} borderBottom={"1px solid #DCDCDC"} paddingBottom={"24px"}>
				<Checkbox
				width={"374px"}
				isChecked={isAllChecked}
				onChange={(e) => handleCheckAll(e)}
				>
				Check All
				</Checkbox>

				<Flex marginTop={"8px"} gap={"18px"}>
				{Object.entries(wpRoles).map(([roleKey, roleName]) => (
					<Checkbox
					key={roleKey}
					isChecked={firstLoad ? roleName.checked : checkedItems[roleKey]}
					onChange={(e) => handleIndividualCheck(roleKey, e.target.checked)}
					>
					{roleName.name}
					</Checkbox>
				))}
				</Flex>
			</Stack>
    	</Box>

	{/* User Role Table */}
		<Flex gap={"10px"} direction={"row"}>
		  <InputGroup w="220px" h={"38px"}>
			<InputRightElement pointerEvents="none" children={<SearchIcon color="#6B6B6B" />} />
			<Input
			  placeholder="Search"
			  focusBorderColor="blue.500"
			  borderRadius={"4px"}
			  padding={"10px 16px"}
			  onChange={(e) => debounceSearch(e.target.value)}
			/>
		  </InputGroup>
		  <Select
			size="md"
			placeholder={__("Bulk Actions", "everest-forms")}
			options={[
				{
				label: __("Delete", "everest-forms"),
				value: "delete",
				},
			]}
			isClearable
			isSearchable={false}
			onChange={(selectedOption) => setBulkDelete(selectedOption?.value || "")}
			/>
		  <Button
			minW="64px"
			minH="36px"
			borderRadius="3px"
			border="1px solid #475BB2"
			padding="8px 14px 8px 14px"
			type="button"
			bg="#F6F7F7"
			onClick={handleBulkDelete}
		  >
			<Text
			  fontWeight="500"
			  size="13px"
			  lineHeight="19.5px"
			  color={"#475BB2"}
			  width={"36px"}
			  height={"20px"}
			>
			  {__("Apply", "everest-forms")}
			</Text>
		  </Button>
		</Flex>

		<Stack>
		  <Box borderWidth="1px" rounded="md" overflow="auto">
			<Table size="sm">
			  <Thead>
				<Tr height={"48px"} textAlign={"left"}>
				  <Th>
					<Checkbox
					  isChecked={isAllSelected}
					  isIndeterminate={isIndeterminate}
					  onChange={(e) => handleSelectAll(e.target.checked)}
					/>
				  </Th>
				  <Th>ID</Th>
				  <Th>Name</Th>
				  <Th>Email</Th>
				  <Th>Role</Th>
				  <Th>Permission</Th>
				  <Th>Action</Th>
				</Tr>
			  </Thead>
			  <Tbody>
			  {totalManagers === 0 ? (
						<Tr>
							<Td colSpan="7">
								<Flex justify="center" align="center" flexDirection={"column"} height="100%">
									<img height={"236px"} width={"262px"} src={evf_roles_and_permission.not_found_image}/>
									<Stack marginTop={"16px"} textAlign={"center"} gap={0}>
										<Text margin={0} fontSize="lg" color="#222222" fontWeight={600}>
											{__("You don’t have any Manager yet", "everest-forms")}
										</Text>
										<Text margin={"8px 0 0 0"} fontSize="sm" color="#6B6B6B" fontWeight={400}>
											{__("Please create a manager and you are good to go.", "everest-forms")}
										</Text>
									</Stack>
								</Flex>
							</Td>
						</Tr>
					) : (
						managers?.map((value) => (
							<Tr key={value.id} textAlign="left" height="48px">
								<Td>
									<Checkbox
										isChecked={selectedRows.includes(value.id)}
										onChange={(e) => handleSelectRow(value.id, e.target.checked)}
									/>
								</Td>
								<Td>{value.id}</Td>
								<Td>{`${value.first_name} ${value.last_name}`}</Td>
								<Td>{value.email}</Td>
								<Td>{value.roles}</Td>
								<Td>
									<Flex gap="4px" flexWrap="wrap">
										{value.permissions.map((permission, index) => (
											<Text
												key={index}
												margin="0"
												cursor="pointer"
												height="22px"
												fontSize="12px"
												fontWeight="400"
												backgroundColor="#EDEDED"
												color="#383838"
												padding="2px 6px"
												borderRadius="5px"
											>
												{permissions[permission]}
											</Text>
										))}
									</Flex>
								</Td>
								<Td>
									<Flex alignItems="center">
										<UserDisplayModal
											wp_roles={wpRoles}
											context="edit"
											value={{
												permission: value.permissions,
												email: value.email,
												permission_details: permissions,
											}}
											setUserAdded={setUserAdded}
										/>
										{" | "}
										<TrashUserRoleModel deleteManager={() => deleteManager(value.id)} />
									</Flex>
								</Td>
							</Tr>
						))
					)}
			  </Tbody>
			</Table>
		  </Box>

		  {/* Pagination */}
			<Stack mt={3}>
				<Flex alignItems="center" justify="space-between">
					<Flex alignItems="center">
						<Text fontSize="md" p={"4"}>
							{__("Show per page", "everest-forms")}
						</Text>
						<Select
							onChange={handlePageSizeChange}
							colorScheme="primary"
							isSearchable={false}
							options={mappedOptions}
							defaultValue={mappedOptions[0]}
						/>
					</Flex>
						<Pagination
							pagesCount={pagesCount}
							currentPage={currentPage}
							isDisabled={isDisabled}
							onPageChange={handlePageChange}
						>
							<PaginationContainer justify="space-between" padding={"4px"}>
								<PaginationPrevious
									_hover={{ bg: "#BEE3F8" }}
									bg="#E2E8F0"
									width={"38px"}
									height={"26px"}
								>
									<FaChevronLeft />
								</PaginationPrevious>
								<PaginationPageGroup
									align="center"
									marginLeft={"0"}
									separator={
										<PaginationSeparator
											bg="#63B3ED"
											fontSize="12px"
											width={"38px"}
											height={"26px"}
											jumpSize={"11px"}
										/>
									}
								>
									{pages?.map((page) => (
										<PaginationPage
											width={"38px"}
											height={"26px"}
											bg="#EDF2F7"
											key={`pagination_page_${page}`}
											padding={"4px 16px"}
											borderRadius={"3px"}
											page={page}
											fontSize="12px"
											_hover={{ bg: "#BEE3F8" }}
											_current={{
												bg: "#63B3ED",
												fontSize: "14px",
												width:"38px",
												height:"26px",
											}}
										/>
									))}
								</PaginationPageGroup>
								<PaginationNext
									_hover={{ bg: "#BEE3F8" }}
									bg="#E2E8F0"
									width={"38px"}
									height={"26px"}
								>
									<FaChevronRight />
								</PaginationNext>
							</PaginationContainer>
						</Pagination>
				</Flex>
			</Stack>
		</Stack>
	  </Stack>
	);
  };

  export default UserRoleTable;