import { FC, useCallback, useState } from 'react';
import { useReactiveVar } from '@apollo/client';
import { Card } from 'components/card';
import { Divider, Heading, Fab, UnderLay, Visible } from 'components';
import { Container, TouchableWithoutFeedback } from 'components/layout';
import { Close } from 'icons';
import { isCreateRoomOpenVar } from 'state-management/dialogs';
import { Root } from 'components/create-room';

export const CreateRoom: FC = () => {
  const isCreateRoomOpen = useReactiveVar(isCreateRoomOpenVar);
  const [tabIndex, setTabIndex] = useState(0);

  const closeDialog = useCallback(() => {
    isCreateRoomOpenVar(false);
  }, []);

  return (
    <Visible if={isCreateRoomOpen}>
      <UnderLay
        alignItems="center"
        justifyContent="center"
        isActive={isCreateRoomOpen}
        setIsActive={closeDialog}
      >
        <TouchableWithoutFeedback onPress={() => {}}>
          <Card width={650} variant="plain" colorVariant="base">
            <Heading
              px="m"
              height={50}
              title="Create Room"
              isAction={true}
              action={
                <Fab
                  onPress={closeDialog}
                  sizeVariant="medium"
                  variant="plain"
                  colorVariant="transparent"
                  centerElement={<Close colorVariant="body" />}
                />
              }
            />
            <Divider directionVariant="horizontal" colorVariant="divider-02" />
            <Container p="m">
              <Root tabIndex={tabIndex} setTabIndex={setTabIndex} />
            </Container>
          </Card>
        </TouchableWithoutFeedback>
      </UnderLay>
    </Visible>
  );
};