text: import { Typography } from "@material-ui/core";
  import { TextField } from "@material-ui/core";
  import React from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import { Grid } from "@material-ui/core";
  import DropDown from "../users/button/DropDown";
  import RangeSlider from "./RangeSlider";
  import { DatePicker } from "jalali-react-datepicker";
  import ChipsArray from "./ChipArray";
  import { Paper } from "@material-ui/core";
  import { useForm } from "react-hook-form";
  import { Button } from "@material-ui/core";
  
  const useStyles = makeStyles((theme) => ({
    root: {
      "& > *": {
        margin: theme.spacing(1),
      },
    },
    paper: {
      padding: theme.spacing(3),
      color: theme.palette.text.secondary,
    },
  }));
  
  const CreateGroup = (props) => {
    const classes = useStyles();
    const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm();
  
    const onSubmit = (data) => {
      alert(JSON.stringify(data));
    }; // your form submit function which will invoke after successful validation
  
    return (
      <form onSubmit={handleSubmit(onSubmit)} className={classes.root}>
        <Grid container>
          <Grid item xs={12}>
            <Paper className={classes.paper}>
              <Grid>
                <Typography
                  className={classes.alignRight}
                  variant="h6"
                  component={"span"}
                >
                  ایجاد گروه کاربری خاص
                </Typography>
                <Grid item xs={6}>
                  <TextField
                    placeholder="عنوان گروه"
                    size="small"
                    margin="normal"
                    style={{ marginBottom: "10px" }}
                    {...register("label", {
                      required: true,
                      maxLength: 20,
                      pattern: /^[A-Za-z]+$/i,
                    })}
                  />
                  {errors?.label?.type === "required" && (
                    <p style={{ color: "red" }}>این قسمت الزامی است</p>
                  )}
                  {errors?.label?.type === "maxLength" && (
                    <p>نام نباید بیش از 20 حرف باشد</p>
                  )}
                  {errors?.label?.type === "pattern" && <p>فقط حروف الفبا</p>}
  
                  <DropDown
                    style={{ marginBottom: "20px" }}
                    options={[
                      {
                        value: "test9",
                        label: "1",
                      },
                      {
                        value: "test6",
                        label: "2",
                      },
                      {
                        value: "test7",
                        label: "3",
                      },
                    ]}
                  />
  
                  <Grid style={{ display: "flex", marginTop: "30px" }}>
                    <Typography
                      style={{ marginBottom: "30px" }}
                      component={"span"}
                    >
                      دارای رمزارز:
                    </Typography>
                    <ChipsArray style={{ marginBottom: "20px" }} />
                    {errors?.label?.type === "required" && (
                      <p>این قسمت الزامی است</p>
                    )}
                  </Grid>
                  <Typography gutterBottom component={"span"}>
                    :میزان دارایی
                    <RangeSlider />
                  </Typography>
                  <Typography gutterBottom component={"span"}>
                    :میزان تراکنش
                    <RangeSlider />
                  </Typography>
  
                  <Typography gutterBottom component={"span"}>
                    میزان توکن
                    <RangeSlider />
                  </Typography>
                  <Typography gutterBottom component={"span"}>
                    میزان تراکنش
                    <RangeSlider />
                  </Typography>
                  <TextField
                    placeholder="تعداد تراکنش"
                    size="small"
                    margin="normal"
                    style={{ marginBottom: "30px" }}
                    {...register("label", {
                      required: true,
                      maxLength: 20,
                      pattern: /^[A-Za-z]+$/i,
                    })}
                  />
                  {errors?.label?.type === "required" && (
                    <p>این قسمت الزامی است</p>
                  )}
                  <Grid style={{ display: "flex" }}>
                    <Typography
                      style={{ marginBottom: "30px" }}
                      component={"span"}
                    >
                      تاریخ ثبت نام:
                    </Typography>
                    <DatePicker />
                  </Grid>
                  <Grid style={{ display: "flex" }}>
                    <Typography component={"span"}>
                      تاریخ ثبت نام آخرین تراکنش:
                    </Typography>
                    <DatePicker />
                  </Grid>
                </Grid>
                <Grid style={{ textAlign: "left" }}>
                  <Button variant="contained" color="primary" type="submit">
                    ذخیره
                  </Button>
                </Grid>
              </Grid>
            </Paper>
          </Grid>
        </Grid>
      </form>
    );
  };
  
  export default CreateGroup;
  