import * as React from 'react';
import { Flex, Text, Button, Box, HStack, } from '../../themes/components';
import SelfPreview from '../../components/SelfPreview';
import { TextInput } from 'react-native';
import { ThemeContext } from 'styled-components';
import { DYTE_DEV_MODE } from '../../env';
import borderRadius from '../../themes/foundations/borderRadius';
import { setUserDisplayName, } from '../../store/participantSlice';
import { useDispatch, useSelector } from 'react-redux';
export default function ShowSetupScreen({ width, height, isLandscape, meetingCode, roomName, onChangeMeetingCode, joinMeeting, title, }) {
    const dispatch = useDispatch();
    const [inputError, setInputError] = React.useState({
        displayName: false,
        meetingCode: false,
    });
    const { colors } = React.useContext(ThemeContext);
    const displayName = useSelector((state) => state.participant.displayName);
    const roomViewType = useSelector((state) => state.room.roomViewType);
    const onJoinMeetingClicked = () => {
        const inputFieldsErrors = {
            displayName: false,
            meetingCode: false,
        };
        if (!meetingCode || !displayName) {
            if (!displayName) {
                inputFieldsErrors.displayName = true;
            }
            if (!meetingCode) {
                inputFieldsErrors.meetingCode = true;
            }
        }
        else {
            joinMeeting();
        }
        setInputError(inputFieldsErrors);
    };
    return (<Flex height={height} width={width} justify={isLandscape ? 'space-evenly' : 'center'} align="center" backgroundColor="secondary.1000" top={0} direction={isLandscape ? 'row' : 'column'} bottom={0}>
			<Flex align="center">
				<Text fontWeight="bold" py={18} fontSize="lg">{title}</Text>
				<SelfPreview />
			</Flex>

			<Flex width={width / (isLandscape ? 3 : 1) - 40} justify="center">
				{DYTE_DEV_MODE ? (<Box>
						<Text color="textPrimary.300" mt={20}>Name: </Text>
						<TextInput style={{
        paddingLeft: 15,
        height: 48,
        marginVertical: 10,
        borderRadius: borderRadius.medium,
        color: colors.textPrimary[300],
        backgroundColor: colors.secondary[800],
        width: width / (isLandscape ? 3 : 1) - 40,
    }} onChangeText={(e) => dispatch(setUserDisplayName(e))} editable showSoftInputOnFocus value={displayName}/>
					</Box>) : (<HStack justify="center" py={24}>
						<Text>
							you are joining as
							{' '}
						</Text>
						<Text fontWeight="bold">{displayName}</Text>
					</HStack>)}
				{inputError.displayName && <Text color="danger.300" mb={10}> Please enter your display name</Text>}
				{!roomName && DYTE_DEV_MODE && (<Box>
						<Text color="textPrimary.300">Meeting Code:</Text>
						<TextInput style={{
        paddingLeft: 15,
        paddingBottom: 7,
        paddingTop: 7,
        marginVertical: 10,
        borderRadius: borderRadius.medium,
        color: colors.textPrimary[300],
        backgroundColor: colors.secondary[800],
        width: width / (isLandscape ? 3 : 1) - 40,
    }} onChangeText={onChangeMeetingCode} value={meetingCode}/>
						{inputError.meetingCode && <Text color="danger.300" mb={10}> Please enter meeting room code</Text>}
					</Box>)}
				<Button onClick={onJoinMeetingClicked}>
					<Box bg="primary.500" py={12} mt={10} borderRadius={borderRadius.medium} align="center">
						<Text>Join</Text>
					</Box>
				</Button>
			</Flex>
		</Flex>);
}
//# sourceMappingURL=showSetupScreen.js.map