implementations.tsx

import React from 'react'

import {
  Text,
  TableContainer,
  Table,
  TableCaption,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Tooltip,
  HStack,
  IconButton,
  Icon,
} from '@chakra-ui/react'
import { FaEye, FaPlay, FaTrash } from 'react-icons/fa'

import { Implementation, Pattern } from 'src/models'

import { implementations, patterns } from '../patterns'

const tableHeaders = ['Titulo', 'Descripcion', 'Fecha de creacion', '']

export type ImplementationsProps = {
  patternId: Pattern['id']
}
export const Implementations: React.FC<ImplementationsProps> = ({
  patternId,
}) => {
  const pattern = patterns.find((p) => p.id === patternId)
  const patternImplementations = implementations.filter(
    (implementation) => implementation.patternId === patternId
  )

  if (!pattern || !patternImplementations) {
    // TODO: empty state
    return null
  }

  return (
    <TableContainer>
      <Table variant="striped" size="lg">
        <TableCaption>
          Implementaciones disponibles de {pattern.title}
        </TableCaption>
        <Thead>
          <Tr>
            {tableHeaders.map((header, index) => (
              <Th key={`th-${index}`}>{header}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {patternImplementations.map((implementation, index) => (
            <Tr key={`implementation-${implementation.title}-${index}`}>
              <Td>{implementation.title}</Td>
              <Td>
                <Tooltip label={implementation.description} hasArrow>
                  <Text isTruncated maxW="sm">
                    {implementation.description}
                  </Text>
                </Tooltip>
              </Td>
              <Td>{new Date(implementation.creationDate).toUTCString()}</Td>
              <Td>
                <ActionsRow _implementation={implementation} />
              </Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </TableContainer>
  )
}
type ActionsRowProps = {
  _implementation: Implementation
}
const ActionsRow: React.FC<ActionsRowProps> = ({ _implementation }) => {
  return (
    <HStack>
      <IconButton
        aria-label="view implementation"
        variant="unstyled"
        icon={<Icon as={FaEye} />}
      />
      <IconButton
        aria-label="test implementation"
        variant="unstyled"
        icon={<Icon as={FaPlay} />}
      />
      <IconButton
        aria-label="delete implementation"
        variant="unstyled"
        icon={<Icon as={FaTrash} />}
      />
    </HStack>
  )
}