formalizations-list.tsx

import {
  Badge,
  Center,
  HStack,
  Icon,
  IconButton,
  List,
  ListItem,
  ListProps,
  Text,
  Tooltip,
  useToast,
  VStack,
} from '@chakra-ui/react'
import React from 'react'
import { FaDownload, FaTrash } from 'react-icons/fa'
import { Formalization, Pattern } from 'src/models'
import { DeleteFormalizationMutation } from '../query-builder/delete-formalization-mutation'
import { useQueryClient } from 'react-query'
import { GetPatternQuery } from '../query-builder'

export type FormalizationListProps = {
  patternId: Pattern['id']
  formalizations: Formalization[]
} & ListProps

export const FormalizationList: React.FC<FormalizationListProps> = ({
  formalizations,
  patternId,
  ...props
}) => {
  const [isDeleting, setIsDeleting] = React.useState(false)
  const toast = useToast()
  const queryClient = useQueryClient()

  const deleteMutation = DeleteFormalizationMutation.useMutation({
    onSuccess: () => {
      toast({
        status: 'success',
        position: 'top',
        title: `Se ha eliminado la formalizacion satisfactoriamente.`,
      })
      setIsDeleting(false)

      queryClient.invalidateQueries(GetPatternQuery.getKey({ id: patternId }))
    },
    onError: () => {
      toast({
        status: 'error',
        position: 'top',
        title: `Ha ocurrido un error al eliminar la formalizacion.`,
      })
    },
  })

  const handleOnRemoveFormalization = (id: string) => {
    setIsDeleting(true)
    deleteMutation.mutate({ id })
  }
  return (
    <List {...props}>
      {formalizations.map((formalization, index) => {
        const fileExtension = formalization.fileName.split('.')[1] ?? ''
        return (
          <ListItem
            pt="8"
            id={`formalization-${index}`}
            key={`formalization-${index}`}
            display="flex"
            minW="350px"
          >
            <VStack w="full">
              <Badge>{formalization.name}</Badge>
              <HStack
                spacing="0"
                w="full"
                border="1px"
                borderColor="gray.200"
                borderRadius="sm"
                bg="white"
                width="full"
                height="min-content"
                mt="0"
                minW="0"
                flex="1"
                alignItems="flex-start"
                fontSize="xs"
                h="52px"
              >
                <Center bg="blue.600" borderLeftRadius="base" px="4" h="52px">
                  <Text
                    fontWeight="medium"
                    variant="-1"
                    color="white"
                    textTransform="uppercase"
                  >
                    {fileExtension}
                  </Text>
                </Center>
                <HStack
                  h="full"
                  borderColor="gray.200"
                  borderWidth="px"
                  borderStyle="solid"
                  borderRadius="base"
                  borderLeft="none"
                  borderLeftRadius="none"
                  ml="0"
                  w="full"
                  minWidth="0"
                  flex="1"
                >
                  <VStack
                    justifyContent="flex-start"
                    spacing="1"
                    pl="3"
                    minW="0"
                    flex="1"
                  >
                    <Text
                      variant="-1"
                      isTruncated={true}
                      w="full"
                      textAlign="center"
                    >
                      {formalization.fileName}
                    </Text>
                  </VStack>
                  <HStack>
                    <Tooltip
                      hasArrow
                      label={<Text>Descargar formalizacion</Text>}
                    >
                      <IconButton
                        aria-label="download formalization"
                        variant="unstyled"
                        color="blue.400"
                        mr="-4"
                        onClick={() =>
                          handleOnRemoveFormalization(formalization.id)
                        }
                        icon={<Icon as={FaDownload} />}
                      />
                    </Tooltip>
                    <Tooltip
                      hasArrow
                      label={<Text>Eliminar formalizacion</Text>}
                    >
                      <IconButton
                        aria-label="remove formalization"
                        variant="unstyled"
                        color="blue.400"
                        isLoading={isDeleting}
                        onClick={() =>
                          handleOnRemoveFormalization(formalization.id)
                        }
                        icon={<Icon as={FaTrash} />}
                      />
                    </Tooltip>
                  </HStack>
                </HStack>
              </HStack>
            </VStack>
          </ListItem>
        )
      })}
    </List>
  )
}