ImagePicker.tsx

import { Button, Dialog, Pagination } from '@mui/material'
import React, { useState } from 'react'
import { useQuery } from 'react-query'
import { fetchEcogestureImages, useWhoAmI } from '../../API'
import { getAxiosXSRFHeader } from '../../axios.config'
import SingleImage from './SingleImage'

const IMAGES_PER_PAGE = 15

interface ImagePickerProps {
  imageURL: string
  handleChange: (value: string, type: 'image') => void
  defaultIcon?: string
}

const ImagePicker: React.FC<ImagePickerProps> = ({
  imageURL,
  handleChange,
  defaultIcon,
}) => {
  const { data: user } = useWhoAmI()
  const { data: imagesNames } = useQuery({
    queryKey: ['imageNames'],
    queryFn: () =>
      fetchEcogestureImages(getAxiosXSRFHeader(user?.xsrftoken ?? '')),
  })

  // Default icon must be the first of the list if it exists
  if (defaultIcon && imagesNames) {
    const indexOfDefault = imagesNames.indexOf(defaultIcon)
    if (indexOfDefault > 0) {
      imagesNames.splice(indexOfDefault, 1)
      imagesNames.unshift(defaultIcon)
    }
  }
  const pageCount = Math.ceil((imagesNames?.length ?? 1) / IMAGES_PER_PAGE)
  const imageIndex = imagesNames?.indexOf(imageURL ?? '') ?? 1

  const [selectedImageURL, setSelectedImageURL] = useState(imageURL ?? '')
  const [openModal, setOpenModal] = useState(false)
  const [currentPage, setCurrentPage] = useState(
    Math.floor((imageIndex > 0 ? imageIndex : 1) / IMAGES_PER_PAGE + 1)
  )
  const [preSelectImage, setPreSelectImage] = useState(imageURL ?? '')

  const toggleModal = () => {
    setOpenModal(prev => !prev)
  }

  const handleValidateImage = () => {
    const newImage =
      defaultIcon && preSelectImage === '' ? defaultIcon : preSelectImage
    setPreSelectImage(newImage)
    setSelectedImageURL(newImage)
    handleChange(newImage, 'image')
    setOpenModal(false)
  }

  const startIndex = (currentPage - 1) * IMAGES_PER_PAGE
  const stopIndex = startIndex + IMAGES_PER_PAGE

  return (
    <>
      {selectedImageURL === '' || !selectedImageURL ? (
        <>
          <p>Pas d&apos;image sélectionnée</p>
          <br />
          <Button onClick={toggleModal}>Choisir une image</Button>
        </>
      ) : (
        <>
          <img
            src={selectedImageURL}
            width="120"
            height="120"
            className="ecogesture-image"
            alt="selected"
          />
          <Button onClick={toggleModal}>Modifier l&apos;image</Button>
        </>
      )}

      <Dialog open={openModal} className="modal-large">
        <div className="image-picker">
          {imagesNames
            ?.slice(startIndex, stopIndex)
            ?.map(image => (
              <SingleImage
                imageURL={image}
                key={image}
                selectedImage={preSelectImage}
                setSelectedImageURL={setPreSelectImage}
              />
            ))}
        </div>
        <Pagination
          count={pageCount}
          page={currentPage}
          onChange={(_e, page) => setCurrentPage(page)}
          style={{
            display: 'flex',
            justifyContent: 'center',
            marginTop: '1rem',
          }}
        />
        <div className="buttons">
          <Button variant="outlined" onClick={() => setOpenModal(false)}>
            Annuler
          </Button>
          <Button onClick={handleValidateImage}>Valider</Button>
        </div>
      </Dialog>
    </>
  )
}

export default ImagePicker