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 { GetPatternQuery } from '../patterns/query-builder'

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

export type ImplementationsProps = {
  patternId: Pattern['id']
}
export const Implementations: React.FC<ImplementationsProps> = ({
  patternId,
}) => {
  const patternQuery = GetPatternQuery.useQuery({ id: patternId })
  const implementations = [] // todo new endpoint

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

  return (
    <TableContainer>
      <Table variant="striped" size="lg">
        <TableCaption>{tableCaption}</TableCaption>
        <Thead>
          <Tr>
            {tableHeaders.map((header, index) => (
              <Th key={`th-${index}`}>{header}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {implementations.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>
      <Tooltip label={<Text>Ver detalles</Text>}>
        <IconButton
          aria-label="view implementation"
          variant="unstyled"
          icon={<Icon as={FaEye} />}
        />
      </Tooltip>
      <Tooltip label={<Text>Correr tests</Text>}>
        <IconButton
          aria-label="test implementation"
          variant="unstyled"
          icon={<Icon as={FaPlay} />}
        />
      </Tooltip>
      <Tooltip label={<Text>Eliminar implementacion</Text>}>
        <IconButton
          aria-label="delete implementation"
          variant="unstyled"
          icon={<Icon as={FaTrash} />}
        />
      </Tooltip>
    </HStack>
  )
}