import { FC, useCallback } from 'react';
import { TouchableTile, Text, Visible, Divider, Card, UnderLay } from 'components';
import { Row, Container } from 'components/layout';
import { CopyLink, Pencil, Trash } from 'icons';
import { isMessageMoreActionOpenVar } from 'state-management/dialogs';
import {
  deletingMessageIdVar,
  editingMessageIdVar,
  isEditingMessageVar,
  messageMoreActionsPositionVar,
  selectedMessageIdVar,
} from 'state-management/chat';
import { ColorName } from '@emotion/react';
import { useReactiveVar } from '@apollo/client';

export const MessageMoreAction: FC = () => {
  const selectedMessageId = useReactiveVar(selectedMessageIdVar);
  const isMessageMoreActionOpen = useReactiveVar(isMessageMoreActionOpenVar);
  const dialogPosition = useReactiveVar(messageMoreActionsPositionVar);

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

  const deleteMessage = useCallback(() => {
    deletingMessageIdVar(selectedMessageId);
    closeDialog();
  }, [closeDialog, selectedMessageId]);

  const editMessage = useCallback(() => {
    editingMessageIdVar(selectedMessageId);
    isEditingMessageVar(true);
    closeDialog();
  }, [closeDialog, selectedMessageId]);

  const editActions: ActionType[] = [
    {
      id: 3,
      title: 'Copy Link',
      onPress: () => {},
      leftElement: <CopyLink />,
    },
    {
      id: 4,
      onPress: editMessage,
      title: 'Edit Message',
      leftElement: <Pencil />,
    },
    {
      id: 5,
      onPress: deleteMessage,
      title: 'Delete Message',
      leftElement: <Trash />,
      titleColor: 'secondary',
    },
  ];
  return (
    <Visible if={isMessageMoreActionOpen}>
      <UnderLay
        isTransparent={true}
        alignItems="center"
        justifyContent="center"
        isActive={isMessageMoreActionOpen}
        setIsActive={closeDialog}
      >
        <Card
          position="absolute"
          top={dialogPosition.top}
          bottom={dialogPosition.bottom}
          right={'m'}
          p="2xs"
          variant="outline"
          overflow="hidden"
          colorVariant="base"
          width={180}
        >
          {editActions.map(({ id, title, titleColor, leftElement, onPress }) => {
            return (
              <TouchableTile
                key={id}
                onPress={onPress}
                variant="text"
                sizeVariant="small"
                centerElement={
                  <Row alignItems="center">
                    <Visible if={!!leftElement}>
                      <Container mr="s">{leftElement}</Container>
                    </Visible>
                    <Text
                      my="xs"
                      variant="caption"
                      color={titleColor || 'body'}
                      weightVariant="normal"
                    >
                      {title}
                    </Text>
                    <Divider colorVariant="divider-01" directionVariant="horizontal" />
                  </Row>
                }
              />
            );
          })}
        </Card>
      </UnderLay>
    </Visible>
  );
};

interface ActionType {
  id: number;
  title?: string;
  caption?: string;
  titleColor?: ColorName;
  onPress?: () => void;
  leftElement?: JSX.Element;
}