import {
  Box,
  Button,
  Card,
  CardBody,
  Container,
  Heading,
  HStack,
  Image,
  Input,
  Stack,
  StackDivider,
  Text,
} from "@chakra-ui/react";
import { type FormEvent, useState } from "react";

export function meta() {
  return [{ title: "Hammer - Car Crushers" }];
}

export default function () {
  const [username, setUsername] = useState("");
  const [uid, setUid] = useState("");
  const [status, setStatus] = useState("");
  const [visible, setVisible] = useState(false);
  const [avatarUrl, setAvatarUrl] = useState("");

  return (
    <Container maxW="container.lg">
      <Heading>User Lookup</Heading>
      <HStack>
        <Input
          id="username"
          onBeforeInput={(e) => {
            const { data }: { data?: string } & FormEvent<HTMLInputElement> = e;

            if (data?.match(/\W/)) e.preventDefault();
          }}
          placeholder="Roblox username"
        />
        <Button ml="8px">Search</Button>
      </HStack>
      <Card maxW="sm" visibility={visible ? "visible" : "hidden"}>
        <CardBody>
          <Image mb="16" src={avatarUrl} />
          <Stack divider={<StackDivider />} spacing="6">
            <Box>
              <Heading size="xs">USERNAME</Heading>
              <Text pt="2" fontSize="sm">
                {username}
              </Text>
            </Box>
            <Box>
              <Heading size="xs">USER ID</Heading>
              <Text pt="2" fontSize="sm">
                {uid}
              </Text>
            </Box>
            <Box>
              <Heading size="xs">MODERATION STATUS</Heading>
              <Text pt="2" fontSize="sm">
                {status}
              </Text>
            </Box>
          </Stack>
        </CardBody>
      </Card>
    </Container>
  );
}