import { FC, useCallback } from 'react';
import { useReactiveVar } from '@apollo/client';
import { UnderLay, Visible, Fab, Card, Checkbox } from 'components';
import { Close } from 'icons';
import { isDeleteRoomOpenVar } from 'state-management/dialogs';
import { Text } from 'components/text';
import { Container, Row } from 'components/layout';
import { Button } from 'components/button';

export const DeleteRoom: FC = () => {
  const isDeleteRoomOpen = useReactiveVar(isDeleteRoomOpenVar);

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

  return (
    <Visible if={isDeleteRoomOpen}>
      <UnderLay
        alignItems="center"
        justifyContent="center"
        isActive={isDeleteRoomOpen}
        setIsActive={closeDialog}
      >
        <Card width={385} variant="outline" colorVariant="base" py="l">
          <Container position="absolute" top={10} right={10}>
            <Fab
              alignSelf="flex-end"
              onPress={closeDialog}
              sizeVariant="medium"
              variant="plain"
              colorVariant="transparent"
              centerElement={<Close colorVariant="body" width={15} height={15} />}
            />
          </Container>
          <Text variant="heading" mt="l" textAlign="center" fontSize={26}>
            Are you sure want to {'\n'} delete this room?
          </Text>
          <Row mt="l" justifyContent="center" alignItems="center">
            <Checkbox colorVariant="base-02" isActive={false} />
            <Text ml="m" variant="body">
              Also delete for Muhammad Sarmad
            </Text>
          </Row>
          <Row mt="l" alignItems="center" justifyContent="center">
            <Button
              sizeVariant="large"
              titleColor="body"
              colorVariant="base-02"
              title="Cancel"
              onPress={closeDialog}
            />
            <Container mx="2xs" />
            <Button
              sizeVariant="large"
              colorVariant="primary"
              title="Delete"
              onPress={closeDialog}
            />
          </Row>
        </Card>
      </UnderLay>
    </Visible>
  );
};