import {useState, useEffect} from 'react'
import PropTypes from 'prop-types'
import ToggleButton from '@mui/material/ToggleButton'
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
import Typography from '@mui/material/Typography'
import {Box} from '@mui/material'
import CircularProgress from '@mui/material/CircularProgress'

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'

export default function Montant({selectedMontant, setSelectedMontant, validMontant}) {
  const [prices, setPrices] = useState(null)
  const handleChange = (event, newMontant) => {
    setSelectedMontant(newMontant)
  }

  useEffect(() => {
    const fetchPrices = async () => {
      try {
        const response = await fetch(`${SITE_URL}/stripe/dons-list`)
        const pricesList = await response.json()
        setPrices(pricesList)
      } catch (error) {
        console.error('error', error)
      }
    }

    fetchPrices()
  }, [prices])

  return (
    <Box>
      <Typography marginTop={1} variant='button' component='div'>
        Choisir un montant *
      </Typography>
      <ToggleButtonGroup
        exclusive
        disabled={Boolean(validMontant)}
        size='large'
        color='primary'
        value={selectedMontant}
        onChange={handleChange}
      >
        {!prices && (
          <CircularProgress color='primary' size={20} />
        )}

        {prices && prices.map(r => (
          <ToggleButton key={r.id} value={r.id}>{r.unit_amount / 100} €</ToggleButton>
        ))}

      </ToggleButtonGroup>
    </Box>
  )
}

Montant.propTypes = {
  selectedMontant: PropTypes.string,
  setSelectedMontant: PropTypes.func.isRequired,
  validMontant: PropTypes.string
}