import { Badge, Box, Card, Heading, Stack, Text } from '@chakra-ui/react';
import { Link } from '@tanstack/react-router';
import { toFormattedDate } from '../helpers';
import { BookOne } from '../interfaces';
import { IconBadge } from './IconBadge';
import { WorkingProgressStatusBadge } from './WorkingProgressStatusBadge';
import { WorkingRatingBadge } from './WorkingRatingBadge';
import { WorkingReviewsBadge } from './WorkingReviewsTotalBadge';

export function WorkingListCard({
  id,
  title,
  description,
  author,
  progressStatus,
  updatedAt,
  chaptersTotal,
  wordsTotal,
  ratingTotal,
  reviewsTotal
}: BookOne) {
  return (
    <Card.Root width="100%" variant="elevated">
      <Card.Body>
        <Stack>
          <Stack direction="row" justifyContent="space-between">
            <Text as="div" minWidth={0}>
              <Link to={`/work/book/${id}`}>
                <Heading
                  color="colorPalette.400"
                  _hover={{
                    textDecoration: 'underline',
                    textDecorationColor: 'colorPalette.700'
                  }}
                >
                  {title}
                </Heading>
              </Link>
            </Text>

            <Stack direction="row" justifyContent="center" alignItems="center">
              <WorkingRatingBadge ratingTotal={ratingTotal} />
              <WorkingReviewsBadge reviewsTotal={reviewsTotal} />
              <WorkingProgressStatusBadge progressStatus={progressStatus} />
            </Stack>
          </Stack>

          <Stack>
            <Stack direction="row">
              <Link>by:</Link>
              <Link to={`/profile/${author.username}`}>
                <Text
                  color="colorPalette.400"
                  _hover={{
                    textDecoration: 'underline',
                    textDecorationColor: 'colorPalette.700'
                  }}
                >
                  {author.username}
                </Text>
              </Link>
            </Stack>

            <Stack direction="row">
              <Box>
                <Badge size="md" variant="solid">
                  <Stack direction="row">
                    <Text>last updated:</Text>
                    <Text>{toFormattedDate({ value: updatedAt })}</Text>
                  </Stack>
                </Badge>
              </Box>
              <Box>
                <Badge size="md" variant="solid">
                  <Stack direction="row">
                    <Text>chapters:</Text>
                    <Text>{chaptersTotal}</Text>
                  </Stack>
                </Badge>
              </Box>
              <Box>
                <Badge size="md" variant="solid">
                  <Stack direction="row">
                    <Text>words:</Text>
                    <Text>{wordsTotal}</Text>
                  </Stack>
                </Badge>
              </Box>
            </Stack>
          </Stack>

          <Stack>
            <Text lineClamp={4}>{description}</Text>
          </Stack>
        </Stack>
      </Card.Body>
    </Card.Root>
  );
}