implementations.tsx

import React from 'react'

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

import { Implementation, Pattern } from 'src/models'
import { GetPatternQuery } from '../patterns/query-builder'
import { GetImplementationsByPatternIdQuery } from './query-builder/get-implementations-by-pattern-id-query'
import { DateUtils } from 'src/utils/date-utils'
import { AddImplementationButton } from './add-implementation'
import { RunTestsButton } from './run-tests'

const tableHeaders = [
  'Nombre',
  ' Imagen',
  'Descripcion',
  'Fecha de creacion',
  '',
]

export type ImplementationsProps = {
  patternId: Pattern['id']
}
export const Implementations: React.FC<ImplementationsProps> = ({
  patternId,
}) => {
  const patternQuery = GetPatternQuery.useQuery({ id: patternId })
  const implementationsQuery = GetImplementationsByPatternIdQuery.useQuery({
    patternId,
  })

  const tableCaption =
    implementationsQuery.data?.length === 0
      ? `No hay implementaciones disponibles de ${patternQuery.data?.name}`
      : `Implementaciones disponibles de ${patternQuery.data?.name}`

  return (
    <VStack spacing="2">
      <TableContainer>
        <Table variant="striped" size="lg" minW="80vw">
          <TableCaption>{tableCaption}</TableCaption>
          <Thead>
            <Tr>
              {tableHeaders.map((header, index) => (
                <Th key={`th-${index}`}>{header}</Th>
              ))}
            </Tr>
          </Thead>
          <Tbody>
            {implementationsQuery.data?.map((implementation, index) => (
              <Tr key={`implementation-${implementation.name}-${index}`}>
                <Td>{implementation.name}</Td>
                <Td>{implementation.dockerhubImageName}</Td>
                <Td>
                  <Tooltip label={implementation.description} hasArrow>
                    <Text isTruncated maxW="sm">
                      {implementation.description}
                    </Text>
                  </Tooltip>
                </Td>
                <Td>
                  {DateUtils.formatLocalDateTime(implementation.createdDate)}
                </Td>
                <Td>
                  <ActionsRow
                    implementation={implementation}
                    pattern={patternQuery.data}
                  />
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
      <HStack w="full" justifyContent="flex-end">
        {patternQuery.data && (
          <AddImplementationButton
            pattern={patternQuery.data}
            hasTooltip={true}
          >
            <Button variant="solid" colorScheme="blue">
              Crear Implementacion
            </Button>
          </AddImplementationButton>
        )}
      </HStack>
    </VStack>
  )
}
type ActionsRowProps = {
  implementation: Implementation
  pattern: Pattern
}
const ActionsRow: React.FC<ActionsRowProps> = ({ implementation, pattern }) => {
  return (
    <HStack>
      <Tooltip label={<Text>Ver detalles</Text>}>
        <IconButton
          aria-label="view implementation"
          variant="unstyled"
          icon={<Icon as={FaEye} />}
        />
      </Tooltip>
      <RunTestsButton implementation={implementation} pattern={pattern}>
        <IconButton
          aria-label="test implementation"
          variant="unstyled"
          icon={<Icon as={FaPlay} />}
        />
      </RunTestsButton>
      <Tooltip label={<Text>Eliminar implementacion</Text>}>
        <IconButton
          aria-label="delete implementation"
          variant="unstyled"
          icon={<Icon as={FaTrash} />}
        />
      </Tooltip>
    </HStack>
  )
}