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 CategoryFormValues = {
  name: string;
  description: string;
  thumbnail: string | null;
};

type Category = {
  id: string;
  name: string;
  description: string;
  status: boolean;
};

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';

interface Props {
  open: boolean;
  setOpen: (v: boolean) => void;
  editData?: Category | null;
}

export default function AddEditCategoryPanel({
  open,
  setOpen,
  editData,
}: Props) {
    const getInitialValues = (
        data: Category | null
    ): CategoryFormValues => ({
        name: data?.name ?? "",
        description: data?.description ?? "",
        thumbnail: null,
    });

    const initialValues = getInitialValues(editData ?? null);
    const [thumbnail, setThumbnail] = useState<string | null>(null);

  return (
    <Offcanvas
      isOpen={open}
      onClose={() => setOpen(false)}
      header={
        <div className="flex justify-between items-center pb-0">
          <div className="flex items-center gap-2">
            <span className="p-2 rounded">
              <IconBox className="text-warning" />
            </span>

            <h3 className="font-semibold">
              {editData ? "Edit Category" : "Add New Category"}
            </h3>
          </div>

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

          <button
            type="submit"
            className="px-4 py-2 text-sm bg-primary text-white rounded-md"
          >
            {editData ? "Update Category" : "Create Category"}
          </button>
        </div>
      }
    >
      <Formik
        enableReinitialize
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={(values) => {
          console.log("SUBMIT:", values);
          setOpen(false);
        }}
      >
        {({ handleSubmit, setFieldValue }) => (
          <Form onSubmit={handleSubmit} className="flex flex-col h-full">
            {/* BODY */}
            <div className="flex-grow overflow-auto p-4 space-y-5">

              {/* CATEGORY NAME */}
              <div>
                <label className="text-sm font-medium">
                  Category Name *
                </label>

                <Field name="name" className={inputCls} />

                <ErrorMessage
                  name="name"
                  component="small"
                  className="text-red-500"
                />
              </div>

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

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

                <ErrorMessage
                  name="description"
                  component="small"
                  className="text-red-500"
                />
              </div>
              <div>
                <ImageUpload
                  label="Category Thumbnail"
                  value={thumbnail}
                  onChange={(url: string | null) => {
                    setThumbnail(url);
                    setFieldValue("thumbnail", url);
                  }}
                />
              </div>
            </div>

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