import Offcanvas from "../../../components/Offcanvas";
import { Formik, Form, Field } from "formik";
import { HexColorPicker } from "react-colorful";
import { useState, useEffect } from "react";
import IconX from "../../../components/Icon/IconX";

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

interface Props {
  open: boolean;
  setOpen: (v: boolean) => void;
  editData?: any;
  onSave: (values: any) => void;
}

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

export default function OrderStatusOffcanvas({
  open,
  setOpen,
  editData,
  onSave,
}: Props) {
  const [textColor, setTextColor] = useState("#ffffff");
  const [bgColor, setBgColor] = useState("#3b82f6");

  useEffect(() => {
    setTextColor(editData?.textColor || "#ffffff");
    setBgColor(editData?.bgColor || "#3b82f6");
  }, [editData, open]);

  const initialValues: OrderStatusForm = {
    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 Status" : "Add Order Status"}
          </h3>

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

          <button
            type="submit"
            form="orderStatusForm"
            className="px-4 py-2 bg-primary text-white rounded"
          >
            {editData ? "Update" : "Create"}
          </button>
        </div>
      }
    >
      <Formik
        enableReinitialize
        initialValues={initialValues}
        onSubmit={(values) => {
          onSave({
            ...values,
            textColor,
            bgColor,
          });
        }}
      >
        {({ handleSubmit }) => (
          <Form
            id="orderStatusForm"
            onSubmit={handleSubmit}
            className="p-4 space-y-5"
          >
            {/* NAME */}
            <div>
              <label className="text-sm font-medium">
                Order Status Name
              </label>
              <Field name="name" className={inputCls} />
            </div>

            {/* DESCRIPTION */}
            <div>
              <label className="text-sm font-medium">
                Description
              </label>
              <Field
                as="textarea"
                name="description"
                rows={3}
                className={inputCls}
              />
            </div>

            {/* TEXT COLOR */}
            <div>
              <label className="text-sm font-medium">
                Text Color
              </label>
              <HexColorPicker
                color={textColor}
                onChange={setTextColor}
              />
              <p className="text-xs mt-1">{textColor}</p>
            </div>

            {/* BG COLOR */}
            <div>
              <label className="text-sm font-medium">
                Background Color
              </label>
              <HexColorPicker
                color={bgColor}
                onChange={setBgColor}
              />
              <p className="text-xs mt-1">{bgColor}</p>
            </div>

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

              <div
                className="inline-block px-4 py-1 rounded-full text-sm font-semibold"
                style={{
                  backgroundColor: bgColor,
                  color: textColor,
                }}
              >
                {editData?.name || "Preview"}
              </div>
            </div>
          </Form>
        )}
      </Formik>
    </Offcanvas>
  );
}