import Banner from "../components/Banner";

export default function Create() {
  const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      return false;
    }
    return true;
  }

  return (
    <>
      <Banner content="Create Your Masterpiece" />
      <div className="mx-4 md:mx-16 my-8">
        <p className="mb-8">
          Welcome to the Recipe Creation Wizard! Simply fill in the details about your culinary creation,
          including the recipe's name, a description, and other specifics like its category, duration,
          and difficulty. Don't forget to dynamically add all your ingredients and instructions using
          the dedicated buttons, and feel free to upload an appealing image. All required fields are
          marked with an <span className="text-red-500">*</span>. Once everything looks perfect, just hit the "Create Recipe"
          button to
          share your masterpiece!
        </p>
        <form>
          <div className="flex flex-col">
            <label htmlFor="title" className="text-sm">
              Recipe Title
              <span className="text-red-500">*</span>
            </label>
            <p className="text-xs pt-1 pb-2 text-gray-700">
              Please provide a unique title for your recipe. This is the most important part!
            </p>
            <input
              onKeyDown={keyDownHandler}
              className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
          focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
              type="text"
              id="title"
              name="title"
              required
              maxLength={128}
              minLength={1}
              placeholder="e.g., Classic Chicken Curry"
            />
            <p className="hidden peer-invalid:block text-xs text-red-500 my-1">Please enter a title. Between 1-128 characters.</p>
          </div>
          <div className="flex flex-col my-4">
            <label htmlFor="description" className="text-sm">
              Description
              <span className="text-red-500">*</span>
            </label>
            <p className="text-xs pt-1 pb-2 text-gray-700">
              Please provide a description for your recipe. This can be short and sweet or long and detailed!
            </p>
            <textarea
              className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
          focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500"
              id="description"
              name="description"
              rows={4}
              required
              maxLength={1024}
              minLength={1}
              placeholder="A brief description of your delicious recipe..."
            ></textarea>
            <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
              Please enter a description. Between 1-1000 characters.
            </p>
          </div>
          <div className="my-4 flex flex-col gap-x-2">
            <div className="flex flex-col flex-grow">
              <label htmlFor="tags" className="text-sm">
                Recipe Tags
              </label>
              <p className="text-xs pt-1 pb-2 text-gray-700">
                Please provide a list of tags. <span className="italic">e.g., easy, dairy-free, gluten-free, high protein.</span>
              </p>
              <input
                onKeyDown={keyDownHandler}
                className="border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm"
                maxLength={32}
                enterKeyHint="done"
                type="text"
                id="tag"
                name="tag"
                placeholder="e.g., Healthy"
              />
              <input type="hidden" name="tags" id="tags" value="" />
            </div>
            <ul id="tag-list" className="my-2 flex gap-1 flex-wrap"></ul>
          </div>
          <div className="my-4 flex gap-x-2">
            <div className="flex flex-col flex-grow w-1/3">
              <label htmlFor="preparation-time" className="text-sm">
                Prep Time
                <span className="text-red-500">*</span>
              </label>
              <p className="text-xs pt-1 pb-2 text-gray-700">
                Please provide the estimated prep time (minutes).
              </p>
              <input
                onKeyDown={keyDownHandler}
                className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
                type="number"
                id="preparation-time"
                name="preparation-time"
                required
                min="0"
                max="120"
                placeholder="e.g., 20"
              />
              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                Please enter a time (minutes).
              </p>
            </div>
            <div className="flex flex-col flex-grow w-1/3">
              <label htmlFor="cook-time" className="text-sm">
                Cook Time
                <span className="text-red-500">*</span>
              </label>
              <p className="text-xs pt-1 pb-2 text-gray-700">
                Please provide the estimated cook time (minutes).
              </p>
              <input
                onKeyDown={keyDownHandler}
                className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
                type="number"
                id="cook-time"
                name="cook-time"
                required
                min="0"
                max="120"
                placeholder="e.g., 45"
              />
              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                Please enter a time (minutes).
              </p>
            </div>
            <div className="flex flex-col flex-grow w-1/3">
              <label htmlFor="serving-size" className="text-sm">
                Serving Size
                <span className="text-red-500">*</span>
              </label>
              <p className="text-xs pt-1 pb-2 text-gray-700">
                Please provide the estimated serving size.
              </p>
              <input
                onKeyDown={keyDownHandler}
                className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 
            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500"
                type="number"
                max="16"
                min="1"
                required
                id="serving-size"
                name="serving-size"
                placeholder="e.g., 4"
              />
              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                Please enter a serving size.
              </p>
            </div>
          </div>
          <div className="my-4 flex gap-x-2">
            <div className="flex flex-col flex-grow w-1/3">
              <label htmlFor="category" className="text-sm">
                Category
                <span className="text-red-500">*</span>
              </label>
              <p className="text-xs pt-1 pb-2 text-gray-700">
                Please provide the meal category.
              </p>
              <select
                id="category"
                name="category"
                required
                className="peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none 
            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm 
            invalid:border-red-500"
              >
                <option value="">Select a category</option>
                <option value="breakfast">Breakfast</option>
                <option value="lunch">Lunch</option>
                <option value="dinner">Dinner</option>
                <option value="dessert">Dessert</option>
                <option value="snack">Snack</option>
                <option value="side">Side</option>
                <option value="other">Other</option>
              </select>
              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                Please select a category.
              </p>
            </div>
            <div className="flex flex-col flex-grow w-1/3">
              <label htmlFor="difficulty" className="text-sm">
                Difficulty
                <span className="text-red-500">*</span>
              </label>
              <p className="text-xs pt-1 pb-2 text-gray-700">
                Please provide a baseline difficulty.
              </p>
              <select
                id="difficulty"
                name="difficulty"
                required
                className="peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none 
            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm 
            invalid:border-red-500"
              >
                <option value="">Select a difficulty</option>
                <option value="1">Beginner</option>
                <option value="2">Easy</option>
                <option value="3">Intermediate</option>
                <option value="4">Challenging</option>
                <option value="5">Extreme</option>
              </select>
              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                Please select a difficulty.
              </p>
            </div>
          </div>
          <div className="flex flex-col my-4">
            <label htmlFor="ingredients" className="text-sm">
              Ingredients
              <span className="text-red-500">*</span>
            </label>
            <p className="text-xs py-1 text-gray-700">Please provide a list of ingredients and their quantities.</p>
            <ul id="ingredient-list">
              <li className="w-full flex gap-x-2 py-2">
                <div className="flex-grow">
                  <input
                    onKeyDown={keyDownHandler}
                    className="peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none 
                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
                invalid:border-red-500"
                    type="text"
                    id="ingredients"
                    name="ingredients"
                    required
                    minLength={1}
                    placeholder="Ingredient name (e.g., Chicken Breast)"
                  />
                  <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                    Please enter at least one ingredient.
                  </p>
                </div>
                <div className="w-1/3">
                  <input
                    onKeyDown={keyDownHandler}
                    className="peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none 
                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
                invalid:border-red-500"
                    type="text"
                    id="quantity"
                    name="quantity"
                    required
                    minLength={1}
                    placeholder="Quantity (e.g., 1lb)"
                  />
                  <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                    Please provide a quantity.
                  </p>
                </div>
              </li>
            </ul>
            <button
              type="button"
              className="text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer"
            >
              Add Ingredient
            </button>
          </div>
          <div className="flex flex-col my-4">
            <label htmlFor="instructions" className="text-sm">
              Instructions
              <span className="text-red-500">*</span>
            </label>
            <p className="text-xs py-1 text-gray-700">
              Please provide a list of instructions. You do not need to include step number, they will be added automatically!
            </p>
            <div id="instruction-list" className="flex flex-col">
              <textarea
                className="peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500
            focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500 
            valid:my-2 invalid:mt-2"
                id="instructions"
                name="instructions"
                rows={3}
                required
                minLength={1}
                placeholder="Step 1: Describe this step..."
              ></textarea>
              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
                Please enter at least one step.
              </p>
            </div>
            <button
              type="button"
              className="text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer"
            >
              Add Instruction Step
            </button>
          </div>
          <div className="flex flex-col my-4">
            <label htmlFor="image" className="text-sm">
              Recipe Image
            </label>
            <p className="text-xs pt-1 pb-2 text-gray-700">
              Please provide an image of your creation. This is optional but is a nice touch!
            </p>
            <input
              type="file"
              accept="image/*"
              name="image"
              id="image"
              className="my-2 block w-full text-sm text-placeholder file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:bg-blue-100 file:text-blue-700 cursor-pointer"
            />
          </div>
          <p id="response" className="hidden"></p>
          <button
            type="submit"
            className="w-full mt-8 bg-gradient-to-r from-blue-200 to-purple-200 py-2 rounded-lg text-lg cursor-pointer shadow-md"
          >
            Create Recipe
          </button>
        </form>
      </div>
    </>
  );
}
