payment-backoffice/payment-iq/app/features/AdvancedSearch/AdvancedSearch1.tsx

import { useState } from "react";
import {
  Box,
  TextField,
  MenuItem,
  Button,
  Drawer,
  FormControl,
  Select,
  Typography,
  Stack,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import SearchIcon from "@mui/icons-material/Search";
import RefreshIcon from "@mui/icons-material/Refresh";


interface IForm {
  userId: string;
  transactionId: string;
  transactionReferenceId: string;
  currency: string;
  state: string;
  depositMethod: string;
  dateTime: string
}

interface ILabel {
  label: string;
  field: string;
  type: string;
  options?: string[];
}

interface IAdvancedSearch {
  setForm: () => void;
  form: IForm[];
  resetForm: () => void;
  labels: ILabel[]
}

export default function AdvancedSearch1({ setForm, form, resetForm, labels }: IAdvancedSearch) {
  const [open, setOpen] = useState(false);

  const handleChange = (field: string, value: any) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const toggleDrawer =
    (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
      if (
        event.type === "keydown" &&
        ((event as React.KeyboardEvent).key === "Tab" ||
          (event as React.KeyboardEvent).key === "Shift")
      ) {
        return;
      }

      setOpen(open);
    };

  const list = () => (
    <Box sx={{ width: 400 }} role="presentation">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Box p={2}>
          <Box sx={{ display: "flex", gap: "60px" }}>
            <Typography variant="h6" gutterBottom>
              Search
            </Typography>
            {/* Buttons */}
            <Box display="flex" justifyContent="flex-end" gap={2}>
              <Button
                variant="contained"
                startIcon={<SearchIcon />}
                onClick={() => console.log("Apply Filter", form)}
                sx={{ "& .span": { margin: "0px", padding: "0px" } }}
              >
                Apply Filter
              </Button>
              <Button
                variant="outlined"
                startIcon={<RefreshIcon sx={{ margin: "0px" }} />}
                onClick={resetForm}
                sx={{ "& span": { margin: "0px", padding: "0px" } }}
              ></Button>
            </Box>
          </Box>
          <Stack spacing={2}>
            {labels.map(({ label, field, type, options }) => (
              <Box key={field}>
                <Typography variant="body2" fontWeight={600} mb={0.5}>
                  {label}
                </Typography>
                {type === "text" && (
                  <TextField
                    fullWidth
                    size="small"
                    value={form[field]}
                    onChange={(e) => handleChange(field, e.target.value)}
                  />
                )}
                {type === "select" && (
                  <FormControl fullWidth size="small">
                    <Select
                      value={form[field]}
                      onChange={(e) => handleChange(field, e.target.value)}
                      displayEmpty
                    >
                      <MenuItem value="">
                        <em>{label}</em>
                      </MenuItem>
                      {options.map((option) => (
                        <MenuItem value={option} key={option}>
                          {option}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                )}
                {type === "date" && (
                  <DatePicker
                    value={form[field]}
                    onChange={(newValue) => handleChange(field, newValue)}
                    renderInput={(params) => (
                      <TextField fullWidth size="small" {...params} />
                    )}
                  />
                )}
              </Box>
            ))}
          </Stack>
        </Box>
      </LocalizationProvider>
    </Box>
  );
  return (
    <Box sx={{ width: '185px' }}>
      <Button
        sx={{
          borderRadius: "8px",
          textTransform: "none",
          backgroundColor: "#f5f5f5",
          color: "#555",
          padding: "6px 12px",
          boxShadow: "inset 0 0 0 1px #ddd",
          fontWeight: 400,
          fontSize: "16px",
          justifyContent: "flex-start",
          "& .MuiButton-startIcon": {
            borderRadius: "4px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          },
          "&:hover": {
            backgroundColor: "#e0e0e0",
          },
        }}
        startIcon={<SearchIcon />}
        onClick={toggleDrawer(true)}
      >
        Advanced Search
      </Button>
      {/* <Button onClick={toggleDrawer(true)}>Open Right Drawer</Button> */}
      <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
        {list()}
      </Drawer>
    </Box>
  );
}