import { TextInput, ScrollView, useWindowDimensions, Alert, } from 'react-native';
import React, { useContext, } from 'react';
import { ThemeContext } from 'styled-components';
import { Button, VStack, Text, Box, CheckBox, } from '../../../themes/components';
import { MediaRoomContext } from '../../../services/MediaRoomService';
import borderRadius from '../../../themes/foundations/borderRadius';
import { ConfigServiceContext } from '../../../utils/ConfigProvider';
import { OrientationContext } from '../../../services/OrientationContext';
import styles from '../../../components/StageSidebar/PollsTab/styles';
export default function CreateNewPoll(props) {
    const { toggle } = props;
    const { mediaRoom } = useContext(MediaRoomContext);
    const [pollData, setPollData] = React.useState({
        question: '',
        options: Array(2).fill(''),
        anonymous: false,
        hideVotes: true,
    });
    const { colors } = useContext(ThemeContext);
    const createPoll = () => {
        const { question, options } = pollData;
        if (!question) {
            Alert.alert('Error:', 'Question Can\'t be empty', [
                { text: 'OK' },
            ]);
        }
        else if ((options[0] === '' || options[1] === '')) {
            Alert.alert('Error:', 'Please add minimum two options', [
                { text: 'OK' },
            ]);
        }
        else {
            const data = { ...pollData };
            data.options = options.filter((el) => el !== '');
            mediaRoom.newPoll(data);
            toggle();
        }
    };
    const onQuestionTextChange = (question) => {
        setPollData({ ...pollData, question });
    };
    const onChangeOptionsText = (text, index) => {
        const { options } = pollData;
        options[index] = text;
        setPollData({ ...pollData, options });
    };
    const addOption = () => {
        const { options } = pollData;
        options.push('');
        setPollData({ ...pollData, options });
    };
    const onChangeAnonymous = () => {
        const anonymous = !pollData.anonymous;
        setPollData({ ...pollData, anonymous });
    };
    const hideResultsBeforeVoting = () => {
        const hideVotes = !pollData.hideVotes;
        setPollData({ ...pollData, hideVotes });
    };
    const { orientation } = React.useContext(OrientationContext);
    const isLandscape = orientation === 'LANDSCAPE';
    const { sessionConfig } = useContext(ConfigServiceContext);
    const windowDimensions = useWindowDimensions();
    const { height } = sessionConfig.theme.dimensions || windowDimensions;
    return (<ScrollView style={{
        height: height - 200,
    }}>
			<Box py={20} px={10}>
				<VStack spacing={4}>
					<Text fontSize="xl" textAlign="center">Poll Question</Text>
					<TextInput multiline autoFocus={false} placeholder="What is your poll for?" numberOfLines={4} value={pollData.question} placeholderTextColor={colors.textPrimary['400']} onChangeText={onQuestionTextChange} style={[{
            backgroundColor: colors.secondary['800'],
            height: 75,
            color: colors.textPrimary[300],
        }, styles.createPollInputText]}/>
					{(pollData.options.map((poll, index) => (<TextInput autoFocus={false} placeholder="Enter an option" value={pollData.options[index]} placeholderTextColor={colors.textPrimary['400']} onChangeText={(text) => onChangeOptionsText(text, index)} style={[{
            backgroundColor: colors.secondary['800'],
            color: colors.textPrimary[300],
        }, styles.createPollInputText]}/>)))}
					<Box bg="secondary.700" mt={20} width={125} height={30} alignItems="center" justifyContent="center">
						<Button onClick={() => addOption()}>
							<Text>+ Add an Option</Text>
						</Button>
					</Box>
					<CheckBox rightText="Anonymous" style={{
        marginTop: 15, paddingRight: 10, height: 20, justifyContent: 'center', borderRadius: borderRadius.small,
    }} rightTextStyle={{ color: 'white' }} checkedCheckBoxColor="white" uncheckedCheckBoxColor="white" isChecked={pollData.anonymous} onClick={onChangeAnonymous}/>
					<CheckBox rightText="Hide Results before Voting" style={{
        marginTop: 15, paddingRight: 10, height: 20, justifyContent: 'center', borderRadius: borderRadius.small,
    }} rightTextStyle={{ color: 'white' }} checkedCheckBoxColor="white" uncheckedCheckBoxColor="white" isChecked={pollData.hideVotes} onClick={hideResultsBeforeVoting}/>
					<Box mt={10} bg="primary.500" p={8} mb={5} justify="center" borderRadius={borderRadius.small}>
						<Button fontSize="16" onClick={createPoll}>
							<Text textAlign="center">Create Poll</Text>
						</Button>
					</Box>
				</VStack>
			</Box>
		</ScrollView>);
}
//# sourceMappingURL=CreateNewPoll.js.map