import { useState } from "react";
import { startBuyFlow } from "../api/client";
import {
  Button,
  FormControlLabel,
  Grid,
  Paper,
  Radio,
  RadioGroup,
  Typography,
} from "@mui/material";
import { useNavigate } from "react-router";

export const Buy = () => {
  const [quantity, setQuantity] = useState(0);
  const navigate = useNavigate();
  const handleBuyFlow = () =>
    startBuyFlow(quantity).then(
      (response) => (window.location.href = response.data.url),
    );

  return (
    <Grid container direction="column" spacing={2} alignItems="center">
      <Typography variant="h3">Buy tokens</Typography>

      <Paper
        variant="outlined"
        sx={{
          p: 5,
          bgcolor: "aliceblue",
          borderRadius: 4,
        }}
      >
        <RadioGroup
          value={quantity.toString()}
          onChange={(e) => setQuantity(parseInt(e.target.value))}
        >
          <FormControlLabel
            value="1"
            control={<Radio />}
            label="1 token - 4€"
          />
          <FormControlLabel
            value="5"
            control={<Radio />}
            label="5 tokens - 20€"
          />
          <FormControlLabel
            value="10"
            control={<Radio />}
            label="10 tokens - 40"
          />
        </RadioGroup>
      </Paper>

      <Button
        onClick={handleBuyFlow}
        variant="contained"
        color="primary"
        sx={{ width: "100%" }}
      >
        Buy
      </Button>
      <Button
        onClick={() => navigate("/signup")}
        variant="contained"
        color="secondary"
        sx={{ width: "100%" }}
      >
        Back
      </Button>
    </Grid>
  );
};