import { Container, Row } from 'components/layout';
import { Text } from 'components/text';
import { Trash, Profile, NotificationOff, UserGroup } from 'icons';
import { TouchableTile } from 'components/touchable-tile';
import { ColorName } from '@emotion/react';
import { Divider } from 'components/divider';
import { useCallback } from 'react';
import { isDeleteRoomOpenVar, isDirectRoomActionOpenVar } from 'state-management/dialogs';
import { Visible } from 'components/visible';

export const Content = () => {
  const openDeleteRoom = useCallback(() => {
    isDeleteRoomOpenVar(true);
  }, []);
  const closeDialog = useCallback(() => {
    isDirectRoomActionOpenVar(false);
  }, []);

  const actions: ActionType[] = [
    {
      title: 'View Profile',
      action: closeDialog,
      leftElement: <Profile />,
    },
    {
      title: 'Mute',
      action: closeDialog,
      leftElement: <NotificationOff />,
    },
    {
      title: 'Create Group',
      action: closeDialog,
      leftElement: <UserGroup />,
    },

    {
      title: 'Delete Chat',
      leftElement: <Trash />,
      action: openDeleteRoom,
      titleColor: 'secondary',
    },
  ];

  return (
    <>
      {actions.map(({ title, titleColor, action, leftElement }) => {
        return (
          <TouchableTile
            onPress={action}
            variant="text"
            sizeVariant="large"
            shapeVariant="round"
            centerElement={
              <Row alignItems="center">
                <Visible if={!!leftElement}>
                  <Container mr="s">{leftElement}</Container>
                </Visible>
                <Text variant="body" color={titleColor || 'body'} weightVariant="normal">
                  {title}
                </Text>
                <Divider colorVariant="divider-01" directionVariant="horizontal" />
              </Row>
            }
          />
        );
      })}
    </>
  );
};

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