patterns.tsx

import React from 'react'

import {
  Heading,
  VStack,
  TableContainer,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Text,
  TableCaption,
  Tooltip,
  HStack,
  Icon,
  IconButton,
  Spinner,
} from '@chakra-ui/react'
import { FaEdit, FaEye, FaPlus, FaTrash } from 'react-icons/fa'
import { Link, routes } from '@redwoodjs/router'
import { patterns } from '.'
import { Pattern } from 'src/models'
import { GetPatternsQuery } from './query-builder'
import { match } from 'ts-pattern'

const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']

export const Patterns: React.FC = () => {
  const patternsQuery = GetPatternsQuery.useQuery({})

  return (
    <VStack alignItems="flex-start" spacing="0">
      <Heading as="h2" px="6">
        Patrones
      </Heading>
      <TableContainer>
        <Table variant="simple" size="lg">
          <TableCaption>Patrones disponibles</TableCaption>
          <Thead>
            <Tr>
              {tableHeaders.map((header, index) => (
                <Th key={`th-${index}`}>{header}</Th>
              ))}
            </Tr>
          </Thead>
          <Tbody>
            {match(patternsQuery)
              .with({ status: 'success', data: [] }, () => (
                <Text>No se encontraron patrones</Text>
              ))
              .with({ status: 'success' }, ({ data }) =>
                data.map((pattern, index) => (
                  <Tr key={`pattern-${pattern.title}-${index}`}>
                    <Td>
                      <Link to={routes.pattern({ id: pattern.id })}>
                        {pattern.title}
                      </Link>
                    </Td>
                    <Td>
                      <Tooltip label={pattern.description} hasArrow>
                        <Text isTruncated maxW="sm">
                          {pattern.description}
                        </Text>
                      </Tooltip>
                    </Td>
                    <Td>
                      <Text textAlign="center">
                        {pattern.numberOfImplementations}
                      </Text>
                    </Td>
                    <Td>
                      <ActionsRow pattern={pattern} />
                    </Td>
                  </Tr>
                ))
              )
              .with({ status: 'loading' }, () => <Spinner />)
              .otherwise(() => null)}
          </Tbody>
        </Table>
      </TableContainer>
    </VStack>
  )
}

type ActionsRowProps = {
  pattern: Pattern
}
const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
  return (
    <HStack>
      {/* Linter yells but is fine https://github.com/redwoodjs/redwood/issues/1742 */}
      <Link to={routes.pattern({ id: pattern.id })}>
        <IconButton
          aria-label="view pattern"
          variant="unstyled"
          icon={<Icon as={FaEye} />}
        />
      </Link>
      <IconButton
        aria-label="add pattern"
        variant="unstyled"
        icon={<Icon as={FaPlus} />}
      />
      <IconButton
        aria-label="edit pattern"
        variant="unstyled"
        icon={<Icon as={FaEdit} />}
      />
      <IconButton
        aria-label="delete pattern"
        variant="unstyled"
        icon={<Icon as={FaTrash} />}
      />
    </HStack>
  )
}