import { FormControl, Grid } from "@mui/material";
import PropTypes from "prop-types";
import Input from "../common/Input";
import SingleSelect from "../common/SingleSelect";


//import TextArea from "../TextArea";

const TrainingDetailForm = ({
  values,
  touched,
  handleBlur,
  errors,
  handleChange,
  setFieldValue,
  handleSubmit,
  modeOptions,

}) => {
  TrainingDetailForm.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 Type = ["online","offline"];

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <form onSubmit={handleSubmit}>
        <Grid
          container
          spacing={2}
          justifyContent="center"
          alignItems="center"
          sx={{ width: 570 }}
        >
          <Grid item xs={12} justifyContent="center" alignItems="center">
            <FormControl fullWidth>
              <Grid
                container
                spacing={2}
                justifyContent="center"
                alignItems="center"
              >
                <Grid
                  item
                  xs={12}
                  sm={6}
                  container
                  spacing={1}
                  justifyContent="center"
                  alignItems="center"
                >
                  <Input
                    label="Program Name "
                    name="trainingName"
                    type="text"
                    size="large"
                    value={values.trainingName}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    helperText={
                      errors.trainingName && touched.trainingName ? (
                        <span style={{ color: "red" }}>
                          {errors.trainingName}
                        </span>
                      ) : null
                    }
                  />
                </Grid>

                <Grid
                  item
                  xs={12}
                  sm={6}
                  container
                  spacing={1}
                  justifyContent="center"
                  alignItems="center"
                >
                  <Input
                    label="Programe Description "
                    name="description"
                    type="text"
                    size="large"
                    value={values.description}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    helperText={
                      errors.description && touched.description ? (
                        <span style={{ color: "red" }}>
                          {errors.description}
                        </span>
                      ) : null
                    }
                  />
                </Grid>

                <Grid
                  item
                  xs={12}
                  sm={6}
                  container
                  spacing={1}
                  justifyContent="center"
                  alignItems="center"
                >
                  <Input
                    label="Programe Duration(in Days)"
                    name="duration"
                    type="text"
                    size="large"
                    value={values.duration}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    helperText={
                      errors.duration && touched.duration ? (
                        <span style={{ color: "red" }}>{errors.duration}</span>
                      ) : null
                    }
                  />
                </Grid>

                <Grid
                  item
                  xs={12}
                  sm={6}
                  container
                  spacing={1}
                  justifyContent="center"
                  alignItems="center"
                >
                  <SingleSelect
                    arr={modeOptions}
                    label="Select Program Mode"
                    name="modeId"
                    value={values.modeId}
                    onChange={(event, newValue) => {
                      const syntheticEvent = {
                        target: {
                          name: "modeId",
                          value: newValue,
                        },
                      };
                      handleChange(syntheticEvent);
                    }}
                    // onChange={handleChange}
                    onBlur={handleBlur}
                    type="text"
                    helperText={
                      errors.modeId && touched.modeId ? (
                        <span style={{ color: "red" }}>{errors.modeId}</span>
                      ) : null
                    }
                  />
                </Grid>

                <Grid
                  item
                  xs={12}
                  sm={6}
                  container
                  spacing={1}
                  justifyContent="center"
                  alignItems="center"
                >
                  <SingleSelect
                    arr={Type}
                    label="Program Type"
                    name="typeOfTraining"
                    value={values.typeOfTraining}
                    onChange={(event, newValue) => {
                      const syntheticEvent = {
                        target: {
                          name: "typeOfTraining",
                          value: newValue,
                        },
                      };
                      handleChange(syntheticEvent);
                    }}
                    onBlur={handleBlur}
                    type="text"
                    helperText={
                      errors.typeOfTraining && touched.typeOfTraining ? (
                        <span style={{ color: "red" }}>
                          {errors.typeOfTraining}
                        </span>
                      ) : null
                    }
                  />
                </Grid>

                <Grid
                  item
                  xs={12}
                  sm={6}
                  container
                  spacing={1}
                  justifyContent="center"
                  alignItems="center"
                >
                  <Input
                    label="Program Key Health Parameters"
                    name="keyHealthParameterId"
                    type="text"
                    size="large"
                    value={values.keyHealthParameterId}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    helperText={
                      errors.keyHealthParameterId &&
                      touched.keyHealthParameterId ? (
                        <span style={{ color: "red" }}>
                          {errors.keyHealthParameterId}
                        </span>
                      ) : null
                    }
                  />
                </Grid>
              </Grid>
            </FormControl>
          </Grid>
        </Grid>
      </form>
    </div>
  );
};

export default TrainingDetailForm;