import { gql } from '@apollo/client';
import { Box, Button, Card, Heading, Icon, Stack, Text } from '@chakra-ui/react';
import { BookChapterDeleteMutation } from '@generated/types';
import { Link } from '@tanstack/react-router';
import { bookFragment } from '../fragments';
import { useToastMutation } from '../hooks/useToastMutation';
import { bookChapterQuery } from '../pages/work/book/$bookId/chapter/$chapterId/view';
import { bookChapterListQuery } from '../pages/work/book/$bookId/overview/contents';

export function BookChapterCard({
  bookId,
  chapterId,
  title,
  isAuthor
}: {
  readonly bookId: string;
  readonly chapterId: string;
  readonly title: string;
  readonly isAuthor: boolean;
}) {
  const { update: chapterDelete } = useToastMutation<BookChapterDeleteMutation>({
    mutation,
    successMsg: 'Chapter deleted successfully',
    refetchQueries: [bookChapterListQuery, bookChapterQuery]
  });
  return (
    <Card.Root width="100%" variant="elevated">
      <Card.Body paddingX={4} paddingY={2}>
        <Stack direction="row" justifyContent="space-between" alignItems="center">
          <Box>
            <Text as="div" minWidth={0}>
              <Link to={`/work/book/${bookId}/chapter/${chapterId}/view`}>
                <Heading
                  size="sm"
                  color="colorPalette.400"
                  _hover={{
                    textDecoration: 'underline',
                    textDecorationColor: 'colorPalette.700'
                  }}
                >
                  {title}
                </Heading>
              </Link>
            </Text>
          </Box>
          <Stack direction="row" alignItems="center">
            {isAuthor && (
              <>
                <Button
                  color="red.500"
                  variant="ghost"
                  padding={0}
                  _hover={{
                    backgroundColor: 'bg.error'
                  }}
                  onClick={async () => chapterDelete({ variables: { id: chapterId } })}
                >
                  <Icon fontSize="xl">
                    <i className="nf nf-md-delete" />
                  </Icon>
                </Button>
                <Link to={`/work/book/${bookId}/chapter/${chapterId}/edit`}>
                  <Button
                    variant="ghost"
                    padding={0}
                    _hover={{
                      backgroundColor: 'bg.warning'
                    }}
                  >
                    <Icon color="yellow.500" fontSize="xl">
                      <i className="nf nf-fa-edit" />
                    </Icon>
                  </Button>
                </Link>
              </>
            )}
            <Link to={`/work/book/${bookId}/chapter/${chapterId}/view`}>
              <Button variant="ghost" padding={0}>
                <Icon fontSize="xl">
                  <i className="nf nf-fa-angle_right" />
                </Icon>
              </Button>
            </Link>
          </Stack>
        </Stack>
      </Card.Body>
    </Card.Root>
  );
}

const mutation = gql`
  mutation BookChapterDelete($id: ID!) {
    bookChapterDelete(id: $id) {
      ...Book
    }
  }
  ${bookFragment}
`;