import { FC, useCallback } from 'react';
import { useReactiveVar } from '@apollo/client';
import { TouchableWithoutFeedback } from 'components/layout';
import { UnderLay } from 'components/under-lay';
import { Visible } from 'components/visible';
import { isEmojisOpenVar } from 'state-management/dialogs';
import { EmojisAction } from 'components/sheets';

export const Emojis: FC = () => {
  const isEmojisOpen = useReactiveVar(isEmojisOpenVar);

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

  return (
    <Visible if={isEmojisOpen}>
      <UnderLay
        alignItems="center"
        justifyContent="center"
        isActive={isEmojisOpen}
        setIsActive={closeDialog}
      >
        <TouchableWithoutFeedback onPress={() => {}}>
          <EmojisAction isSheetOpen={isEmojisOpen} setIsSheetOpen={closeDialog} />
        </TouchableWithoutFeedback>
      </UnderLay>
    </Visible>
  );
};