patterns.tsx

import React from 'react'

import {
  VStack,
  TableContainer,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Text,
  TableCaption,
  Tooltip,
  HStack,
  Icon,
  IconButton,
  Spinner,
} from '@chakra-ui/react'
import { FaEdit, FaEye, FaPlus } from 'react-icons/fa'
import { match } from 'ts-pattern'

import { Link, routes } from '@redwoodjs/router'

import { Pattern } from 'src/models'

import { AddPatternButton } from './add-pattern'
import { GetPatternsQuery } from './query-builder'
import { RemovePatternButton } from './remove-pattern'
import { FaTrash } from 'react-icons/fa'
import { AddImplementationButton } from '../implementations/add-implementation'

const tableHeaders = ['Nombre', 'Descripcion', '']

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

  return (
    <VStack alignItems="flex-start" spacing="2">
      <Text fontWeight="bold" fontSize="x-large" px="1">
        Patrones
      </Text>
      <TableContainer>
        <Table variant="striped" size="lg" minW="80vw">
          <TableCaption>Patrones disponibles</TableCaption>
          <Thead>
            <Tr>
              {tableHeaders.map((header, index) => (
                <Th color="gray.500" 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.name}-${index}`}>
                    <Td>
                      <Link to={routes.pattern({ id: pattern.id })}>
                        {pattern.name}
                      </Link>
                    </Td>
                    <Td>
                      <Tooltip label={pattern.description} hasArrow>
                        <Text isTruncated maxW="sm">
                          {pattern.description}
                        </Text>
                      </Tooltip>
                    </Td>

                    <Td>
                      <ActionsRow pattern={pattern} />
                    </Td>
                  </Tr>
                ))
              )
              .with({ status: 'loading' }, () => (
                <Tr>
                  <Td colSpan={tableHeaders.length}>
                    <HStack justifyContent="center">
                      <Spinner />
                    </HStack>
                  </Td>
                </Tr>
              ))
              .otherwise(() => null)}
          </Tbody>
        </Table>
      </TableContainer>
      <HStack w="full" justifyContent="flex-end">
        <AddPatternButton />
      </HStack>
    </VStack>
  )
}

type ActionsRowProps = {
  pattern: Pattern
}
const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
  return (
    <HStack spacing="0">
      <Link to={routes.pattern({ id: pattern.id })}>
        <Tooltip label={<Text>Ver detalles</Text>}>
          <IconButton
            aria-label="view pattern"
            variant="unstyled"
            icon={<Icon as={FaEye} />}
          />
        </Tooltip>
      </Link>
      <AddImplementationButton pattern={pattern} hasTooltip={true}>
        <IconButton
          aria-label="add implementation"
          variant="unstyled"
          icon={<Icon as={FaPlus} />}
        />
      </AddImplementationButton>
      <Tooltip label={<Text>Editar patron</Text>}>
        <IconButton
          aria-label="edit pattern"
          variant="unstyled"
          icon={<Icon as={FaEdit} />}
        />
      </Tooltip>
      <RemovePatternButton pattern={pattern} hasTooltip={true}>
        <IconButton
          aria-label="remove pattern"
          variant="unstyled"
          icon={<Icon as={FaTrash} />}
        />
      </RemovePatternButton>
    </HStack>
  )
}