import React from "react";
import styled, { css } from "styled-components";
import { Link } from "react-router-dom";
import { FiMoreVertical } from "react-icons/fi";
import { FaUsers, FaTrash, FaUserPlus } from "react-icons/fa";
import {
  useDeleteRoomMutation,
  ListCurrentUserRoomsDocument,
} from "graphql/generated/graphql";

import { Flex, Button, Dropdown, IconButton } from "@convoy-ui";
import { useModalContext } from "contexts/ModalContext";

const StyledRoomLink = styled.div<{ isSelected?: boolean }>`
  padding: 10px 20px;
  padding-right: 10px;

  ${p => css`
    margin-bottom: ${p.theme.space.small}px;
    border-radius: ${p.theme.radius.small}px;
    background-color: ${p.theme.colors.dark3};
    color: ${p.isSelected ? p.theme.colors.primary : p.theme.colors.white};
  `}

  a {
    color: inherit;
  }
  &:hover {
    color: ${p => p.theme.colors.primary};
  }
`;

interface IRoomLink {
  name: string;
  id: string;
  isSelected?: boolean;
  onInviteMemberClick?: (roomId: string) => void;
}
const RoomLink: React.FC<IRoomLink> = ({
  name,
  id,
  isSelected,
  onInviteMemberClick,
}) => {
  const { dispatch } = useModalContext();
  const [deleteRoom, { loading: isDeleting }] = useDeleteRoomMutation({
    onError(err) {
      console.log(err.message);
    },
    refetchQueries: [{ query: ListCurrentUserRoomsDocument }],
  });

  const handleDelete = () => {
    deleteRoom({
      variables: {
        roomId: id,
      },
    }).catch(console.log);
  };

  const handleAddMembers = () => {
    dispatch({ type: "OPEN", modal: "InviteMembers" });
    onInviteMemberClick(id);
  };

  return (
    <StyledRoomLink isSelected={isSelected}>
      <Flex align="center" justify="space-between" nowrap>
        <Link to={`/room/${id}`}>
          <Flex gap="medium" align="center" nowrap>
            <FaUsers />
            <span>{name}</span>
          </Flex>
        </Link>

        <Dropdown>
          <Dropdown.Toggle>
            <IconButton icon={<FiMoreVertical />} />
          </Dropdown.Toggle>
          <Dropdown.Content style={{ right: "initial" }}>
            <Dropdown.Item>
              <Button
                variant="secondary"
                onClick={handleAddMembers}
                icon={FaUserPlus}
              >
                Add Members
              </Button>
            </Dropdown.Item>
            <Dropdown.Item>
              <Button
                variant="danger"
                isLoading={isDeleting}
                onClick={handleDelete}
                icon={FaTrash}
              >
                Delete
              </Button>
            </Dropdown.Item>
          </Dropdown.Content>
        </Dropdown>
      </Flex>
    </StyledRoomLink>
  );
};

export default React.memo(RoomLink);