animations.tsx

import React from 'react'

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

import { Animation, Pattern } from 'src/models'
import { GetPatternQuery } from '../patterns/query-builder'

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

export type AnimationsProps = {
  patternId: Pattern['id']
}
export const Animations: React.FC<AnimationsProps> = ({ patternId }) => {
  const patternQuery = GetPatternQuery.useQuery({ id: patternId })
  const animations = []

  const tableCaption =
    animations.length === 0
      ? `No hay animaciones disponibles de ${patternQuery.data?.title}`
      : `Animaciones disponibles de ${patternQuery.data?.title}`

  return (
    <TableContainer>
      <Table variant="simple" size="lg">
        <TableCaption>{tableCaption}</TableCaption>
        <Thead>
          <Tr>
            {tableHeaders.map((header, index) => (
              <Th key={`th-${index}`}>{header}</Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {animations.map((animation, index) => (
            <Tr key={`animation-${animation.title}-${index}`}>
              <Td>{animation.title}</Td>
              <Td>
                <Tooltip label={animation.description} hasArrow>
                  <Text isTruncated maxW="sm">
                    {animation.description}
                  </Text>
                </Tooltip>
              </Td>
              <Td>{new Date(animation.creationDate).toUTCString()}</Td>
              <Td>
                <ActionsRow _animation={animation} />
              </Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </TableContainer>
  )
}

type ActionsRowProps = {
  _animation: Animation
}
const ActionsRow: React.FC<ActionsRowProps> = ({ _animation }) => {
  return (
    <HStack>
      <Tooltip label={<Text>Ver</Text>}>
        <IconButton
          aria-label="view animation"
          variant="unstyled"
          icon={<Icon as={FaPlay} />}
        />
      </Tooltip>
      <Tooltip label={<Text>Eliminar animacion</Text>}>
        <IconButton
          aria-label="delete animation"
          variant="unstyled"
          icon={<Icon as={FaTrash} />}
        />
      </Tooltip>
    </HStack>
  )
}