import { RefObject, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import ThemeProvider, {
  BorderRadiusType,
  FontType,
} from "../../context/themeProvider";
import Input from "../input/input";
import ButtonStep from "../tabbedForm/buttonStep";
import Button from "../elements/button";
import GreatIdeaImage from "./GreatIdeaImage";

type DesignPreviewProps = {
  hex: string;
  borderState: BorderRadiusType;
  font: FontType;
  closeSidebar?: () => void;
};

export default function DesignPreviewContainer({
  hex,
  borderState,
  font,
  closeSidebar,
}: DesignPreviewProps) {
  const previewRef = useRef<HTMLDivElement>(null);

  return (
    <ThemeProvider
      alternativeRoot={previewRef}
      primaryColor={hex}
      borderRadius={borderState}
      fontType={font}
    >
      <DesignPreview
        hex={hex}
        borderState={borderState}
        font={font}
        previewRef={previewRef}
        closeSidebar={closeSidebar}
      />
    </ThemeProvider>
  );
}

function DesignPreview({
  previewRef,
}: DesignPreviewProps & { previewRef: RefObject<HTMLDivElement> }) {
  const methods = useForm({
    defaultValues: {
      label: "Lorem ipsum dolor",
      test1: false,
      test2: true,
      test3: false,
      test4: false,
      radio: "two",
      toggle: true,
    },
  });

  return (
    <div className="border border-neutral-medium-light p-4 rounded-lg">
      <div ref={previewRef} className="rounded-lg mt-8 font-sans snippet">
        <FormProvider {...methods}>
          <div className="flex gap-6 justify-between">
            <div className="md:w-1/2 flex flex-col gap-6">
              <div className="text-2xl font-bold">Vorschau</div>
              <p>
                Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle
                Buchstaben da sind und wie sie aussehen. Manchmal benutzt man
                Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um
                Schriften zu testen.{" "}
              </p>

              <div className="flex flex-col gap-6">
                <Input
                  type="text"
                  label="Label"
                  name="label"
                  inputClassName="bg-inherit"
                />
                <Input
                  type="text"
                  label="Label"
                  name="example-2"
                  inputClassName="bg-inherit"
                />
                <div className="flex justify-between mt-4">
                  <ButtonStep
                    direction="Back"
                    svgClassName="fill-interactive-primary-default"
                    disabled={false}
                    className="py-2 px-2 bg-interactive-secondary-default h-fit rounded-lg hover:bg-interactive-secondary-hover active:bg-interactive-secondary-pressed"
                  />

                  <Button
                    type="Primary"
                    text="Button"
                    className="px-6 py-3"
                    onClick={() => {}}
                  />
                </div>
              </div>
            </div>
            <div className="hidden md:block w-1/2 bg-brand-primary-20 rounded-lg">
              <GreatIdeaImage className="w-full" />
            </div>
          </div>
        </FormProvider>
      </div>
    </div>
  );
}