import { DialogActions, DialogContent, DialogTitle } from "@mui/material"
import ResponsiveDialog from "common/ResponsiveDialog"
import { useGateAPI } from "providers"
import React, { useEffect } from "react"

interface Props {
  open: boolean
  onClose: () => void
  gate?: string //if the gate key is passed in just generate for that gate, otherwise give the user a way of selecting which gates
}

export default function GateReports(props: Props){
  const {gate, open, onClose} = props
  const gateAPI = useGateAPI()

  //load all of the gates for the user/team
  useEffect(()=>{
    if(gate) return //if there was a gate passed in we dont need to load them
    gateAPI.listGates(0, 0).then(resp => {
      console.log(resp.data)
    }).catch(err => {
      
    })
  },[gate])

  //selection table to select which gates to generate a report

  /**
   * new api call for gates that takes in an array of gate keys to build the report data for
   * this call will return an array/map of the gate report data
   * in the return loop through the data building a pdf report for each one
   */

  return (
    <ResponsiveDialog open={open} onClose={onClose}>
      <DialogTitle>Gate Reports</DialogTitle>
      <DialogContent>

      </DialogContent>
      <DialogActions></DialogActions>
    </ResponsiveDialog>
  )
}