import React, { useState } from 'react';
import {
  Typography,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
  Stack,
  Box,
  Paper,
  IconButton,
} from '@mui/material';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';

import MoreVertIcon from '@mui/icons-material/MoreVert';

export const FetchReport = () => {
  const [state, setState] = useState('');
  const [psp, setPsp] = useState('');
  const [reportType, setReportType] = useState('');

  const handleDownload = () => {
    // Download logic goes here
    alert('Report downloaded');
  };

  const isDownloadEnabled = state && psp && reportType;

  return (
    <Paper elevation={3} sx={{ padding: 2, margin: 2, display: 'flex', flexDirection: 'column' }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
        <Typography variant="h6" fontWeight="bold">
          Fetch Report
        </Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <CalendarTodayIcon fontSize="small" />
          <Typography variant="body2">Last 30 days</Typography>
          <IconButton size="small">
            <MoreVertIcon fontSize="small" />
          </IconButton>
        </Box>

      </Box>



      <Stack spacing={2}>
        <FormControl fullWidth>
          <InputLabel>Select state (defaults to All)</InputLabel>
          <Select value={state} onChange={(e) => setState(e.target.value)} label="Select state (defaults to All)">
            <MenuItem value="successful">Successful</MenuItem>
            <MenuItem value="failed">Failed</MenuItem>
            <MenuItem value="canceled">Canceled</MenuItem>

            {/* Add more states */}
          </Select>
        </FormControl>

        <FormControl fullWidth>
          <InputLabel>Select PSPs (defaults to All)</InputLabel>
          <Select value={psp} onChange={(e) => setPsp(e.target.value)} label="Select PSPs (defaults to All)">
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>
            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>


            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>


            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>

            <MenuItem value="a1">A1</MenuItem>
            <MenuItem value="ahub">AHUB</MenuItem>
            <MenuItem value="aibms">AIBMS</MenuItem>


            {/* Add more PSPs */}
          </Select>
        </FormControl>

        <FormControl fullWidth>
          <InputLabel>Select report type</InputLabel>
          <Select value={reportType} onChange={(e) => setReportType(e.target.value)} label="Select report type">
            <MenuItem value="allTransactionsReport">All Transactions Report</MenuItem>
            <MenuItem value="depositReport">Deposit Report</MenuItem>
            <MenuItem value="widthdrawReport">WithDraw Report</MenuItem>
            {/* Add more types */}
          </Select>
        </FormControl>

        <Box textAlign="center" mt={2}>
          <Button
            variant="outlined"
            onClick={handleDownload}
            disabled={!isDownloadEnabled}
            sx={{ minWidth: 200 }}
          >
            Download Report
          </Button>
        </Box>
      </Stack>
    </Paper>
  );
};