import React,{useState} from "react";
import CommentEditor from "./CommentEditor";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import "./CommentEditor.css";

const jiraModules = {
    toolbar: [
      ["bold", "italic", "underline", "strike"],
      ["link", "code"],
      [{ list: "bullet" }],
    ],
  };
  
  const jiraFormats = [
    "bold",
    "italic",
    "underline",
    "strike",
    "link",
    "code",
    "list",
  ];
  
const CreateIssue = () =>
{
    const [value, setValue] = useState("");
  return (
    <from >
        <div className="row">
          <div className="col-12 col-md-8">
            <div className="row">
              <label for="defaultFormControlInput" class="form-label ">
                Name
              </label>
              <input
                type="text"
                class="form-control form-control-sm"
                id="defaultFormControlInput"
                placeholder="John Doe"
                aria-describedby="defaultFormControlHelp"
              />
            </div>
            <div className="row my-md-6 my-4 px-0">
              <div className="col-6 ps-0">
                <label for="defaultFormControlInput" class="form-label ">
                  Projec
                </label>
                <select
                  name="DataTables_Table_0_length"
                  aria-controls="DataTables_Table_0"
                  className="form-select form-select-sm"
                  aria-label=""
                >
                  <option>Project-2</option>
                  <option>Project-2</option>
                  <option>Project-3</option>
                </select>
              </div>
              <div className="col-6 pe-0">
                <label for="defaultFormControlInput" class="form-label ">
                  Type
                </label>
                <select
                  name="DataTables_Table_0_length"
                  aria-controls="DataTables_Table_0"
                  className="form-select form-select-sm"
                  aria-label=""
                >
                  <option>Project-2</option>
                  <option>Project-2</option>
                  <option>Project-3</option>
                </select>
              </div>
            </div>
            <div className="row my-md-6 my-4 px-0">
              <div className="col-6 ps-0">
                <label for="defaultFormControlInput" class="form-label ">
                  Status
                </label>
                <select
                  name="DataTables_Table_0_length"
                  aria-controls="DataTables_Table_0"
                  className="form-select form-select-sm"
                  aria-label=""
                >
                  <option>Project-2</option>
                  <option>Project-2</option>
                  <option>Project-3</option>
                </select>
              </div>
              <div className="col-6 pe-0">
                <label for="defaultFormControlInput" class="form-label ">
                  Activity
                </label>
                <select
                  name="DataTables_Table_0_length"
                  aria-controls="DataTables_Table_0"
                  className="form-select form-select-sm"
                  aria-label=""
                >
                  <option>Project-2</option>
                  <option>Project-2</option>
                  <option>Project-3</option>
                </select>
              </div>
            </div>
          </div>
          <div className="col-12 col-md-4">
                      <div class="row g-2"> 
                      <label for="defaultFormControlInput" class="form-label ">
                  Priority
                </label>
  <div class="col-md-4 mt-0">
    <div class="form-check custom-option custom-option-icon p-2"> 
      <label class="form-check-label custom-option-content" for="customRadioIcon1">
        <input
          name="customRadioIcon"
          class="form-check-input form-check-input-sm"
          type="radio"
          id="customRadioIcon1"
          checked
        /> Low
      </label>
    </div>
  </div>

  <div class="col-md-4 mt-0">
    <div class="form-check custom-option custom-option-icon p-2">
      <label class="form-check-label custom-option-content" for="customRadioIcon2">
        <input
          name="customRadioIcon"
          class="form-check-input form-check-input-sm"
          type="radio"
          id="customRadioIcon2"
        /> Medium
      </label>
    </div>
  </div>

  <div class="col-md-4 mt-0">
    <div class="form-check custom-option custom-option-icon p-2">
      <label class="form-check-label custom-option-content" for="customRadioIcon3">
        <input
          name="customRadioIcon"
          class="form-check-input form-check-input-sm"
          type="radio"
          id="customRadioIcon3"
        /> High
      </label>
    </div>
  </div>
</div>


                  </div>
                  <div className="marco-quill-wrapper">
      <ReactQuill
        theme="snow"
        value={value}
        onChange={setValue}
        placeholder="Add a comment..."
        modules={jiraModules}
        formats={jiraFormats}
      />
    </div>
          </div>
      
           
    </from>
  );
};

export default CreateIssue;
