implementations.tsx

import React from 'react'

import {
  Text,
  TableContainer,
  Table,
  TableCaption,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Tooltip,
  HStack,
  IconButton,
  Icon,
  VStack,
  Button,
  useDisclosure,
} from '@chakra-ui/react'
import { FaEdit, FaPlay, FaTrash, FaVial } 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'
import { DeleteImplementationMutation } from './query-builder/delete-implementation-mutation'
import { useQueryClient } from 'react-query'
import { navigate, routes } from '@redwoodjs/router'
import { EditImplementationModal } from './edit-implementation'

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

export type ImplementationsProps = {
  patternId: Pattern['id']
}
export const Implementations: React.FC<ImplementationsProps> = ({
  patternId,
}) => {
  const queryClient = useQueryClient()
  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}`

  const deleteImplementationMutation = DeleteImplementationMutation.useMutation(
    {
      onSuccess: () => {
        queryClient.invalidateQueries(
          GetImplementationsByPatternIdQuery.getKey({ patternId })
        )
      },
    }
  )

  const onDeleteImplementation = (id: Implementation['id']) => {
    deleteImplementationMutation.mutate({ id })
  }

  const onViewReports = (id: Implementation['id']) => {
    navigate(routes.reports({ implementationId: id }))
  }

  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}
                    handleOnDeleteImplementation={onDeleteImplementation}
                    handleOnViewReport={onViewReports}
                  />
                </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
  handleOnDeleteImplementation: (id: Implementation['id']) => void
  handleOnViewReport: (id: Implementation['id']) => void
}
const ActionsRow: React.FC<ActionsRowProps> = ({
  implementation,
  pattern,
  handleOnDeleteImplementation,
  handleOnViewReport,
}) => {
  const editImplementationDisclosure = useDisclosure()

  return (
    <>
      <HStack>
        <Tooltip shouldWrapChildren hasArrow label={<Text>Editar</Text>}>
          <IconButton
            aria-label="edit implementation"
            variant="unstyled"
            onClick={() => editImplementationDisclosure.onOpen()}
            icon={<Icon as={FaEdit} />}
          />
        </Tooltip>
        <RunTestsButton
          implementation={implementation}
          pattern={pattern}
          hasTooltip
        >
          <IconButton
            aria-label="test implementation"
            variant="unstyled"
            icon={<Icon as={FaPlay} />}
          />
        </RunTestsButton>
        <Tooltip
          shouldWrapChildren
          hasArrow
          label={<Text>Eliminar implementacion</Text>}
        >
          <IconButton
            onClick={() => handleOnDeleteImplementation(implementation.id)}
            aria-label="delete implementation"
            variant="unstyled"
            icon={<Icon as={FaTrash} />}
          />
        </Tooltip>
        <Tooltip shouldWrapChildren hasArrow label={<Text>Ver reportes</Text>}>
          <IconButton
            onClick={() => handleOnViewReport(implementation.id)}
            aria-label="view reports"
            variant="unstyled"
            icon={<Icon as={FaVial} />}
          />
        </Tooltip>
      </HStack>
      {editImplementationDisclosure.isOpen && (
        <EditImplementationModal
          disclosure={editImplementationDisclosure}
          implementation={implementation}
          patternId={pattern.id}
        />
      )}
    </>
  )
}