import { createEffect, createSignal } from "solid-js";
import { CaretDown } from "@components/icons/CaretDown";

type Props = {
  indicator?: {
    style?: "circle" | "rect" | "number";
    color?: string;
  };
  fraction?: boolean;
  autoplay?: boolean;
  items: {
    heading?: string;
    subHeading?: string;
    captionPosition?: "top" | "bottom" | "center";
    captionDirection?: "right" | "left" | "center";
    image?: string;
  }[];
  className?: string;
  active?: number;
  timing?: number;
};

export const Carousel = ({
  indicator = {
    style: "circle",
    color: "gray",
  },
  items,
  active = 0,
  fraction,
  className,
  autoplay,
  timing,
}: Props) => {
  const [current, setCurrent] = createSignal<number>(active ?? 0);
  // let timer: number | Timeout | undefined;
  const count = items.length;
  const change = (n: number) => setCurrent(n);
  const next = () => change(current() < count - 1 ? current() + 1 : 0);
  const prev = () => change(current() > 0 ? current() - 1 : count - 1);

  createEffect(() => {
    const time = timing ?? 10000;
    // timer && autoplay ? clearInterval(timer) : null;
    // timer =    setInterval(next, time) : undefined;
    if (!autoplay) return;
    setTimeout(next, time);

    return;
  }, [current()]);
  return (
    <div class={`flex flex-col relative ${className} gap-6`}>
      {/* items */}
      <div class="min-h-[12rem] relative flex">
        <div class="flex overflow-hidden justify-center items-center w-full">
          {items.map((item, n) => {
            return (
              <div
                data-item={n}
                class={`transition-all duration-700  flex justify-center ${
                  current() === n
                    ? "z-2 self-center grow"
                    : "-z-50 opacity-0 shrink w-0"
                }`}
              >
                {fraction && (
                  <span
                    class="absolute top-0 right-3 px-2 py-1 font-thin opacity-70"
                    style={{ color: indicator.color ?? "black" }}
                  >
                    {n + 1}/{count}
                  </span>
                )}
                {item.image && (
                  <img
                    src={item.image}
                    alt={item.heading}
                    class={`max-h-[75vh] h-full w-auto transition-all duration-700  ${
                      current() === n ? "object-contain" : ""
                    }`}
                  />
                )}
              </div>
            );
          })}
        </div>
        {/* prev */}
        <div class="absolute inset-y-0 left-0 w-14 flex items-center justify-center z-10">
          <button
            type="button"
            onClick={() => prev()}
            style={{
              color: indicator.color ?? "black",
            }}
            class={`transition-all duration-700 backdrop-blur-sm rounded-full`}
          >
            <CaretDown className="w-8 h-8 rotate-90" />
          </button>
        </div>
        {/* next */}
        <div class="absolute inset-y-0 right-0 w-14 flex items-center justify-center z-10">
          <button
            type="button"
            onClick={() => next()}
            style={{
              color: indicator.color ?? "black",
            }}
            class={`transition-all duration-700 backdrop-blur-sm rounded-full`}
          >
            <CaretDown className="w-8 h-8 -rotate-90" />
          </button>
        </div>
      </div>
      {/* indicators */}
      <div
        class={`flex self-center justify-center backdrop-blur-sm w-full absolute bottom-0 p-3`}
      >
        {" "}
        <div class="flex gap-2">
          {items.map((item, n) => {
            return (
              <button
                type="button"
                onClick={() => change(n)}
                style={{
                  background: indicator.color ?? "black",
                }}
                class={`transition-all duration-700 relative flex items-center justify-center ${
                  current() === n ? "scale-150" : "opacity-75"
                } ${
                  indicator.style === "circle"
                    ? " rounded-full h-3 w-3"
                    : indicator.style === "rect"
                    ? " h-1 w-4"
                    : " h-2 px-[.35rem] py-[.3rem] rounded-xl"
                }`}
              >
                {indicator.style === "number" && (
                  <small
                    class="text-[.5rem] text-invert self-center"
                    style={{
                      color: indicator.color ?? "black",
                      "font-weight": current() === n ? "700" : "normal",
                    }}
                  >
                    {n + 1}{" "}
                  </small>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};