import { Avatar } from '@app/client/components/ui/avatar';
import { toFormattedDate } from '@app/client/helpers';
import { useUserOneQuery } from '@app/client/hooks/useUserOneQuery';
import { Card, Heading, HStack, SkeletonCircle, SkeletonText, Stack, Text } from '@chakra-ui/react';
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/profile/$username')({
  component: RouteComponent
});

function RouteComponent() {
  const { username } = Route.useParams();

  const { data } = useUserOneQuery({
    input: {
      username
    }
  });

  if (data == null) return <UserOverviewSkeleton />;

  return (
    <Stack width="100%" justifyContent="center" alignItems="center" padding={3}>
      <UserOverview user={{ ...data.userOne }} />
    </Stack>
  );
}

function UserOverview({
  user
}: {
  readonly user: {
    readonly id: string;
    readonly username: string;
    readonly description?: string | null;
    readonly createdAt: string;
  };
}) {
  return (
    <Stack width={{ base: '100%', md: '80%' }} maxWidth="840px" gap={3}>
      <Stack direction="row" alignItems="start">
        <Avatar size="2xl" fallback={user.username[0]} />
        <Stack width="100%">
          <Heading color="colorPalette.400" size="2xl" overflow="auto">
            {user.username}
          </Heading>

          <Stack direction="row">
            <Text fontWeight="bold">joined:</Text>
            <Text color="fg.muted">{toFormattedDate({ value: user.createdAt })}</Text>
          </Stack>
        </Stack>
      </Stack>
      <Card.Root variant="subtle" width="100%">
        <Card.Body paddingX="3" paddingY="1">
          <Text>{user.description ?? 'No user description =('}</Text>
        </Card.Body>
      </Card.Root>
    </Stack>
  );
}

function UserOverviewSkeleton() {
  return (
    <Stack width="100%" justifyContent="center" alignItems="center" padding={3}>
      <Stack width={{ base: '100%', md: '80%' }} maxWidth="840px">
        <SkeletonCircle width={70} height={70} />
        <Stack gap="6" maxWidth="100%">
          <HStack width="full">
            <SkeletonText noOfLines={5} />
          </HStack>
        </Stack>
      </Stack>
    </Stack>
  );
}