animations.tsx

import React from 'react'

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

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

const tableHeaders = ['Nombre', 'Descripcion', '']

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

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

  return (
    <VStack spacing="2">
      <TableContainer>
        <Table variant="simple" size="lg" minW="80vw">
          <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.name}-${index}`}>
                <Td>{animation.name}</Td>
                <Td>
                  <Tooltip label={animation.description} hasArrow>
                    <Text isTruncated maxW="sm">
                      {animation.description}
                    </Text>
                  </Tooltip>
                </Td>
                <Td>
                  <ActionsRow animation={animation} />
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
      <HStack w="full" justifyContent="flex-end">
        {patternQuery.data && (
          <>
            <Button
              variant="solid"
              colorScheme="blue"
              onClick={addAnimationDisclosure.onOpen}
            >
              Crear Animacion
            </Button>
            {addAnimationDisclosure.isOpen && (
              <AddAnimationModal
                pattern={patternQuery.data}
                disclosure={addAnimationDisclosure}
              />
            )}
          </>
        )}
      </HStack>
    </VStack>
  )
}

type ActionsRowProps = {
  animation: Animation
}
const ActionsRow: React.FC<ActionsRowProps> = ({ animation }) => {
  const handleOnClickView = () => {
    const newWindow = window.open()
    newWindow.document.write(animation.htmlContent)
    newWindow.document.close()
  }

  return (
    <HStack>
      <Tooltip label={<Text>Ver</Text>}>
        <IconButton
          aria-label="view animation"
          variant="unstyled"
          onClick={handleOnClickView}
          icon={<Icon as={FaEye} />}
        />
      </Tooltip>
      <Tooltip label={<Text>Eliminar animacion</Text>}>
        <IconButton
          aria-label="delete animation"
          variant="unstyled"
          icon={<Icon as={FaTrash} />}
        />
      </Tooltip>
    </HStack>
  )
}