patterns.tsx

import React from 'react'

import {
  VStack,
  TableContainer,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Text,
  TableCaption,
  Tooltip,
  HStack,
  Icon,
  IconButton,
  Spinner,
  useDisclosure,
} 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 { EditPatternModal } from './edit-pattern'
import { AddImplementationModal } 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>
                      {/* @ts-ignore -- TODO */}
                      <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 }) => {
  const editPatternDisclosure = useDisclosure()
  const addImplementationDisclosure = useDisclosure()
  return (
    <>
      <HStack spacing="0">
        {/* @ts-ignore -- TODO */}
        <Link to={routes.pattern({ id: pattern.id })}>
          <Tooltip
            hasArrow
            shouldWrapChildren
            label={<Text>Ver detalles</Text>}
          >
            <IconButton
              aria-label="view pattern"
              variant="unstyled"
              icon={<Icon as={FaEye} />}
            />
          </Tooltip>
        </Link>

        <Tooltip
          hasArrow
          shouldWrapChildren
          label={<Text>Agregar implementacion</Text>}
        >
          <IconButton
            aria-label="add implementation"
            variant="unstyled"
            onClick={addImplementationDisclosure.onOpen}
            icon={<Icon as={FaPlus} />}
          />
        </Tooltip>

        <Tooltip hasArrow shouldWrapChildren label={<Text>Editar</Text>}>
          <IconButton
            aria-label="edit pattern"
            variant="unstyled"
            onClick={editPatternDisclosure.onOpen}
            icon={<Icon as={FaEdit} />}
          />
        </Tooltip>
        <RemovePatternButton pattern={pattern} hasTooltip={true}>
          <IconButton
            aria-label="remove pattern"
            variant="unstyled"
            icon={<Icon as={FaTrash} />}
          />
        </RemovePatternButton>
      </HStack>
      {editPatternDisclosure.isOpen && (
        <EditPatternModal
          disclosure={editPatternDisclosure}
          pattern={pattern}
        />
      )}
      {addImplementationDisclosure.isOpen && (
        <AddImplementationModal
          disclosure={addImplementationDisclosure}
          pattern={pattern}
        />
      )}
    </>
  )
}