import { ScrollView, useWindowDimensions, TouchableWithoutFeedback, } from 'react-native';
import React, { useContext, useEffect, } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, Flex, Text, Box, } from '../../../themes/components';
import { MediaRoomContext } from '../../../services/MediaRoomService';
import { PeersServiceContext } from '../../../services/PeersService';
import { markMessagesRead } from '../../../store/roomSlice';
import { useDisclosure } from '../../../utils/browser-utils';
import borderRadius from '../../../themes/foundations/borderRadius';
import { ConfigServiceContext } from '../../../utils/ConfigProvider';
import { MessageTypes, } from '../../../types/APITypes';
import CreateNewPoll from '../../../components/StageSidebar/PollsTab/CreateNewPoll';
import PollsCard from '../../../components/StageSidebar/PollsTab/PollsCard';
import { colors } from '../../../themes/foundations';
export default function PollsTab() {
    const { sessionConfig } = useContext(ConfigServiceContext);
    const pollsCreationAllowed = sessionConfig.permissions.polls.can_create;
    const { isOpen, onClose, onOpen } = useDisclosure();
    const { mediaRoom } = useContext(MediaRoomContext);
    const { selfPeer } = useContext(PeersServiceContext);
    const polls = useSelector((state) => state.room.polls);
    const windowDimensions = useWindowDimensions();
    const { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const drawerHeight = Math.floor((height * 2) / 3);
    const onToggle = () => {
        const ot = isOpen ? onClose : onOpen;
        ot();
    };
    const chatMessages = useSelector((state) => state.room.chatMessages);
    const unread = chatMessages.filter((m) => m.read !== true && m.type === MessageTypes.poll);
    const dispatch = useDispatch();
    useEffect(() => {
        if (unread.length > 0) {
            dispatch(markMessagesRead({ [MessageTypes.poll]: true }));
        }
    }, [unread]);
    const pollsArr = Object.values(polls);
    return (<Flex height={height - 30} direction="column" justifyContent="space-between" overflowY="auto" px={10} pb={10} pt={50}>
			<Flex>
				<Box overflowY="auto" className="dyte-client-noScrollbar">

					{!isOpen
        ? (<>
								{pollsArr.length > 0
            ? (<ScrollView style={{
                height: pollsCreationAllowed ? height - 150 : height,
            }} contentContainerStyle={{
                paddingBottom: !pollsCreationAllowed ? 120 : 0,
            }}>
											<TouchableWithoutFeedback>
												<Box>
													{pollsArr.map((poll, index) => (<Box my={10}>
															<Text ml={4}>
																{poll.createdBy ? `Poll by ${poll.createdBy}` : ''}
															</Text>
															<Box mt={1} className="dyte-client-bubble dyte-client-other dyte-client-type-3">
																<PollsCard mediaRoom={mediaRoom} poll={poll} selfPeer={selfPeer}/>
															</Box>
														</Box>))}
												</Box>
											</TouchableWithoutFeedback>
										</ScrollView>)
            : (<Flex height={height - 150} width={width} align="center" justify="center">
											<Text fontSize="lg" color={colors.textPrimary['100']}>
												No Polls created yet.
											</Text>
										</Flex>)}
							</>)
        : <Box>{isOpen && <CreateNewPoll toggle={onToggle}/>}</Box>}
				</Box>
			</Flex>
			{pollsCreationAllowed
        && (<Button fontSize="16" onClick={onToggle}>
					<Box bg={isOpen ? 'danger.500' : 'primary.500'} p={8} justify="center" borderRadius={borderRadius.small}>
						<Text textAlign="center">{isOpen ? 'Cancel Poll Creation' : 'Create New Poll'}</Text>
					</Box>
				</Button>)}
		</Flex>);
}
//# sourceMappingURL=index.js.map