formalizations-list.tsx

import {
  Badge,
  Box,
  Button,
  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 { Pattern } from 'src/models'
import { DeleteFormalizationMutation } from '../query-builder/delete-formalization-mutation'
import { useQueryClient } from 'react-query'
import { GetFormalizationsQuery } from '../query-builder/get-formalizations-query'
import { useDropzone } from 'react-dropzone'
import {
  MAX_FILE_SIZE,
  SIZE_TOO_LARGE,
} from '../add-pattern/use-add-formalizations'
import { CreateFormalizationMutation } from '../query-builder'

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

export const FormalizationList: React.FC<FormalizationListProps> = ({
  patternId,
  ...props
}) => {
  const formalizationsQuery = GetFormalizationsQuery.useQuery({ patternId })
  const [isDeleting, setIsDeleting] = React.useState(false)
  const [isUploadingFormalizations, setIsUploadingFormalizations] =
    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(
        GetFormalizationsQuery.getKey({ 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 })
  }

  const onDrop = React.useCallback(async (acceptedFiles: File[]) => {
    const createFormalizationPromises = acceptedFiles.map((file) => {
      const name = file.name.split('.')[0]
      return CreateFormalizationMutation.mutationFn({
        patternId,
        name,
        fileName: file.name,
        file: file,
      })
    })

    await Promise.all(createFormalizationPromises)

    queryClient.invalidateQueries(GetFormalizationsQuery.getKey({ patternId }))
  }, [])

  const dropzoneState = useDropzone({
    onDrop,
    noDrag: true,
    validator: (file) => {
      if (file.size > MAX_FILE_SIZE) {
        return {
          code: SIZE_TOO_LARGE,
          message: `Maximo ${MAX_FILE_SIZE} MB.`,
        }
      }
      return null
    },
  })

  const formalizations = formalizationsQuery.data
  return (
    <VStack w="full">
      <Box w="full">
        <List {...props} maxW="300px">
          {formalizations &&
            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"
                              onClick={() => console.log('TODO')}
                              icon={<Icon as={FaDownload} />}
                            />
                          </Tooltip>
                          {formalizations.length > 1 && (
                            <Tooltip
                              hasArrow
                              label={<Text>Eliminar formalizacion</Text>}
                            >
                              <IconButton
                                aria-label="remove formalization"
                                ml="-4"
                                variant="unstyled"
                                color="blue.400"
                                isDisabled={isDeleting}
                                onClick={() =>
                                  handleOnRemoveFormalization(formalization.id)
                                }
                                icon={<Icon as={FaTrash} />}
                              />
                            </Tooltip>
                          )}
                        </HStack>
                      </HStack>
                    </HStack>
                  </VStack>
                </ListItem>
              )
            })}
        </List>
      </Box>
      <Box w="full" display="flex" justifyContent="flex-end">
        <div {...dropzoneState.getRootProps()}>
          <Center>
            <input
              aria-label="file-upload"
              {...dropzoneState.getInputProps()}
            />
            <Button colorScheme="blue" isLoading={isUploadingFormalizations}>
              Crear Formalizacion
            </Button>
          </Center>
        </div>
      </Box>
    </VStack>
  )
}