ohctechv3/.svn/pristine/a2/a2c5473b4e05031180f63d8d579d251ed7a31522.svn-base

import {  Grid } from "@mui/material";
import PropTypes from "prop-types";
// import Input from "../common/Input";
import SingleSelect from "../common/SingleSelect"
import MultipleSelect from "../common/MultipleSelect";
// import { InputLabel, MenuItem, Select } from "@mui/material";
// import Autocomplete from "@mui/material/Autocomplete";
// import { useState } from "react";
// import MultiCheckbox from "./MultiCheckbox";

const BusinessReportForm =({
  values,
  touched,
  handleBlur,
  errors,
  handleChange,
  setFieldValue,
  handleSubmit,
  filterData,
  reportData,
}) => {
  BusinessReportForm.propTypes = {
    values: PropTypes.object.isRequired,
    touched: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired,
    handleBlur: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired,
    setFieldValue: PropTypes.func.isRequired,
    handleSubmit: PropTypes.func.isRequired,
  };
  // const ReportName = ["##", "...."];
  // const FilterName = ["##", "........."];
  const Specific=["Yes","No"];

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <form onSubmit={handleSubmit}>
        <Grid container spacing={2} justifyContent="center" alignItems="center" sx={{width:620}} >
              <Grid item xs={12}  container spacing={1} justifyContent="center" alignItems="center">
              <SingleSelect
                    arr={reportData}
                    sx={{width : "600px"}}
                    label="Report Name"
                    name="reportId"
                    value={values.reportId}
                    // onChange={(event, newValue) => {
                    //   const syntheticEvent = {
                    //     target: {
                    //       name: "reportId",
                    //       value: newValue,
                    //     },
                    //   };
                    //   handleChange(syntheticEvent);
                    // }}
                    onChange={(event, newValue) => {
                      setFieldValue('reportId', newValue ? newValue.label : '');
                    }}
                    onBlur={handleBlur}
                    type="text"
                    helperText={
                      errors.reportId && touched.reportId ? (
                        <span style={{ color: "red" }}>{errors.reportId}</span>
                      ) : null
                    }
                  />
              </Grid>
                <Grid item xs={12}  container spacing={1} justifyContent="center" alignItems="center">
                <MultipleSelect
                 sx={{width : "600px"}}
                  arr={filterData}
                  label="Filter Name"
                  name="filterIds"
                  type="text"
                  // size="large"
                  value={values.filterIds}
                  // onChange={handleChange}
                  onChange={(event, newValue) => {
                    setFieldValue('filterIds', newValue);
                  }}
                  onBlur={handleBlur}
                  helperText={
                    errors.filterIds && touched.filterIds? (
                      <span style={{ color: "red" }}>{errors.filterIds}</span>
                    ) : null
                  }
                />
              </Grid>
                <Grid item xs={12}  container spacing={1} justifyContent="center" alignItems="center">
                <SingleSelect
                    arr={Specific}
                    sx={{width : "600px"}}
                    label="Is Patient Specific?"
                    name="isPatientSpecific"
                    value={values.isPatientSpecific}
                    onChange={(event, newValue) => {
                      const syntheticEvent = {
                        target: {
                          name: "isPatientSpecific",
                          value: newValue,
                        },
                      };
                      handleChange(syntheticEvent);
                    }}
                    onBlur={handleBlur}
                    type="text"
                    helperText={
                      errors.isPatientSpecific && touched.isPatientSpecific ? (
                        <span style={{ color: "red" }}>{errors.isPatientSpecific}</span>
                      ) : null
                    }
                  />
                </Grid>  
          </Grid>
      </form>
    </div>
  );
};

export default BusinessReportForm;



{/*<div style={{ display: "flex", justifyContent: "center" }}>
      <form onSubmit={handleSubmit}>
        <Grid container spacing={2} justifyContent="center" alignItems="center" sx={{width:300}}>
         
          <Grid item xs={12}  justifyContent="center" alignItems="center">
            <FormControl fullWidth>
              <Grid container spacing={2} justifyContent="center" alignItems="center">
                <Grid item xs={12}  container spacing={1} justifyContent="center" alignItems="center">
                  <SingleSelect
                    arr={ReportName}
                    label="Report Name "
                    name="reportname"
                    value={values.reportname}
                    onChange={(event, newValue) => {
                      const syntheticEvent = {
                        target: {
                          name: "reportname",
                          value: newValue,
                        },
                      };
                      handleChange(syntheticEvent);
                    }}
                    onBlur={handleBlur}
                    type="text"
                    helperText={
                      errors.reportname && touched.reportname ? (
                        <span style={{ color: "red" }}>{errors.reportname}</span>
                      ) : null
                    }
                  />
                </Grid>

            
                <Grid item xs={12}  container spacing={1} justifyContent="center" alignItems="center">
                  <SingleSelect
                    arr={FilterName}
                    label="Filter Name"
                    name="filtername"
                    value={values.filtername}
                    onChange={(event, newValue) => {
                      const syntheticEvent = {
                        target: {
                          name: "filtername",
                          value: newValue,
                        },
                      };
                      handleChange(syntheticEvent);
                    }}
                    // onChange={handleChange}
                    onBlur={handleBlur}
                    type="text"
                    helperText={
                      errors.filtername && touched.filtername ? (
                        <span style={{ color: "red" }}>
                          {errors.filtername}
                        </span>
                      ) : null
                    }
                  />
                </Grid>
                     
                <Grid item xs={12}  container spacing={1} justifyContent="center" alignItems="center">
                  <SingleSelect
                    arr={Specific}
                    label="Is Patient Specific"
                    name="specific"
                    value={values.specific}
                    onChange={(event, newValue) => {
                      const syntheticEvent = {
                        target: {
                          name: "specific",
                          value: newValue,
                        },
                      };
                      handleChange(syntheticEvent);
                    }}
                    // onChange={handleChange}
                    onBlur={handleBlur}
                    type="text"
                    helperText={
                      errors.specific && touched.specific ? (
                        <span style={{ color: "red" }}>
                          {errors.specific}
                        </span>
                      ) : null
                    }
                  />
                </Grid>
              </Grid>
            </FormControl>
          </Grid>
        </Grid>
      </form>
    </div>*/}