import Offcanvas from "../../../components/Offcanvas";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import IconBox from "../../../components/Icon/IconBox";
import IconX from "../../../components/Icon/IconX";
import { useState } from "react";
import ImageUpload from "../../../components/ImageUpload";

type OrderActionForm = {
  name: string;
  description: string;
};

const validationSchema = Yup.object({
  name: Yup.string().required("Category name is required"),
description: Yup.string().nullable(),
  thumbnail: Yup.string().nullable(),
});

const inputCls =
  'w-full border border-[#ECE2D2] bg-[#FBF6ED] rounded-[10px] px-[14px] py-[10px] text-[14px] text-[#3B2F28] outline-none box-border focus:border-[#CF8F42] focus:ring-1 focus:ring-[#CF8F42] transition';

const ORDER_ACTION_OPTIONS = [
  {
    value: "",
    label: "Choose an action...",
  },
  {
    value: "send_order_details",
    label: "Send order details to customer",
  },
  {
    value: "send_order_details_admin",
    label: "Resend new order notification",
  },
  {
    value: "regenerate_download_permissions",
    label: "Regenerate download permissions",
  },
];
interface Props {
  open: boolean;
  setOpen: (v: boolean) => void;
  editData?: OrderActionForm | null;
}

export default function AddEditOrderActionPanel({
  open,
  setOpen,
  editData,
}: Props) {
  const initialValues: OrderActionForm = {
    name: editData?.name ?? "",
    description: editData?.description ?? "",
  };

  return (
    <Offcanvas
      isOpen={open}
      onClose={() => setOpen(false)}
      header={
        <div className="flex justify-between items-center">
          <h3 className="font-semibold">
            {editData ? "Edit Order Action" : "Add Order Action"}
          </h3>

          <button onClick={() => setOpen(false)}>
            <IconX />
          </button>
        </div>
      }
      footer={
        <div className="flex justify-end gap-3 p-4 border-t">
          <button
            className="px-4 py-2 border rounded"
            onClick={() => setOpen(false)}
          >
            Cancel
          </button>

          <button
            type="submit"
            form="orderActionForm"
            className="px-4 py-2 bg-primary text-white rounded"
          >
            {editData ? "Update" : "Create"}
          </button>
        </div>
      }
    >
      <Formik
        enableReinitialize
        initialValues={initialValues}
        onSubmit={(values) => {
          console.log("SUBMIT:", values);
          setOpen(false);
        }}
      >
        {({ handleSubmit }) => (
          <Form
            id="orderActionForm"
            onSubmit={handleSubmit}
            className="p-4 space-y-5"
          >
            {/* ORDER ACTION NAME */}
            <div>
              <label className="text-sm font-medium">
                Order Action Name
              </label>

              <Field
                name="name"
                className={inputCls}
                placeholder="e.g. send_order_details"
              />
            </div>

            {/* DESCRIPTION */}
            <div>
              <label className="text-sm font-medium">
                Description
              </label>

              <Field
                as="textarea"
                name="description"
                rows={4}
                className={inputCls}
              />
            </div>

          </Form>
        )}
      </Formik>
    </Offcanvas>
  );
}