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 ImageUpload from "../../../components/ImageUpload";
import { useState } from "react";

type Brand = {
  id: string;
  name: string;
  description: string;
  status: boolean;
  thumbnail?: string | null;
};

type BrandFormValues = {
  name: string;
  description: string;
  thumbnail: string | null;
};

const validationSchema = Yup.object({
  name: Yup.string().required("Brand 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?: Brand | null;
}

export default function AddEditBrandPanel({
  open,
  setOpen,
  editData,
}: Props) {
  const [thumbnail, setThumbnail] = useState<string | null>(null);

  const getInitialValues = (data?: Brand | null): BrandFormValues => ({
    name: data?.name ?? "",
    description: data?.description ?? "",
    thumbnail: data?.thumbnail ?? 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 Brand" : "Add New Brand"}
            </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 Brand" : "Create Brand"}
          </button>
        </div>
      }
    >
      <Formik
          enableReinitialize
          initialValues={getInitialValues(editData)}
          validationSchema={validationSchema}
          onSubmit={(values) => {
            console.log(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">

              {/* BRAND NAME */}
              <div>
                <label className="text-sm font-medium">
                  Brand 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>

              {/* THUMBNAIL */}
              <div>
                <ImageUpload
                  label="Brand Thumbnail"
                  value={thumbnail}
                  onChange={(url: string | null) => {
                    setThumbnail(url);
                    setFieldValue("thumbnail", url);
                  }}
                />
              </div>
            </div>

            

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