import { FC, useEffect, useState } from 'react';
import { Container, SafeScreen } from 'components/layout';
import { BackHeader, Dots, Text } from 'components';
import { Root } from 'components/create-room';
import { RoomTypeEnum } from 'expo-schema';

export const CreateRoom: FC = () => {
  const [tabIndex, setTabIndex] = useState(0);
  const [dotCount, setDotCount] = useState(0);
  const [roomTypeParent, setRoomTypeParent] = useState(RoomTypeEnum.Direct);

  useEffect(() => {
    if (roomTypeParent === RoomTypeEnum.Direct) {
      setDotCount(2);
    } else {
      setDotCount(3);
    }
  }, [tabIndex, roomTypeParent]);

  return (
    <SafeScreen edges={['bottom', 'top']}>
      <BackHeader
        isBack={true}
        isDivider={true}
        pr="xs"
        leftElement={
          <Container>
            <Text ml="xs" variant="heading">
              Create a room
            </Text>
          </Container>
        }
        rightElement={
          <Dots
            flexDirectionVariant="row"
            selectedIndex={tabIndex}
            setSelectedIndex={setTabIndex}
            count={dotCount}
          />
        }
      />
      <Root tabIndex={tabIndex} setTabIndex={setTabIndex} setRoomTypeParent={setRoomTypeParent} />
    </SafeScreen>
  );
};