import { ReactElement, useRef, useState } from 'react';

import {
  Button,
  Flex,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Progress,
  Text,
  useDisclosure,
} from '@chakra-ui/react';
import {
  MdAdminPanelSettings,
  MdDeleteForever,
  MdEdit,
  MdWarning,
} from 'react-icons/md';
import { useNavigate, useParams } from 'react-router-dom';

import { Artist, ArtistResource } from '@/back-api';
import { FormCovers } from '@/components/form/FormCovers';
import { FormGroup } from '@/components/form/FormGroup';
import { FormInput } from '@/components/form/FormInput';
import { FormTextarea } from '@/components/form/FormTextarea';
import { useFormidable } from '@/components/form/Formidable';
import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
import { useArtistService, useSpecificArtist } from '@/service/Artist';
import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksOfAnArtist } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator';

export type PopUpUploadProgressProps = {
  title: string;
  // current size send or receive
  currentSize: number;
  // in case of error this element is set to != undefined
  error?: string;
  // Total size to transfer
  totalSize: number;
  // index of the file to transfer
  index: number;
  // When finished the boolean is set to true
  isFinished: boolean;
  // List of element to Transfer
  elements: string[];
  onAbort: () => void;
  onClose: () => void;
};

export const PopUpUploadProgress = ({
  currentSize,
  elements,
  error,
  index,
  isFinished,
  onAbort,
  onClose,
  title,
  totalSize,
}: PopUpUploadProgressProps) => {
  const initialRef = useRef(null);
  const finalRef = useRef(null);
  return (
    <Modal
      initialFocusRef={initialRef}
      finalFocusRef={finalRef}
      closeOnOverlayClick={false}
      onClose={onClose}
      isOpen={true}
    >
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>{title}</ModalHeader>
        <ModalCloseButton ref={finalRef} />

        <ModalBody pb={6} paddingLeft="18px">
          <Flex direction="column" gap="10px">
            {isFinished ? (
              <Text fontSize="20px" fontWeight="bold">
                All {elements.length} element have been sent
              </Text>
            ) : (
              <Text fontSize="20px" fontWeight="bold">
                [{index + 1}/{elements.length}] {elements[index]}
              </Text>
            )}
            <Progress
              colorScheme="green"
              hasStripe
              value={currentSize}
              isAnimated
              max={totalSize}
              height="24px"
            />
            <Flex>
              <Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text>
              <Text marginLeft="auto">
                {totalSize.toLocaleString('fr-FR')} Bytes
              </Text>
            </Flex>
            {error && (
              <Text fontWeight="bold" color="darkred">
                {error}
              </Text>
            )}
          </Flex>
        </ModalBody>
        <ModalFooter>
          {isFinished ? (
            <Button onClick={onClose} variant="@success">
              Ok
            </Button>
          ) : (
            <Button colorScheme="red" mr={3} onClick={onAbort} ref={initialRef}>
              Abort
            </Button>
          )}
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};
