import { createDropzone } from "@soorria/solid-dropzone";
import { Info, UploadIcon } from "lucide-solid";
import { createSignal, Show } from "solid-js";
import { createMutation, useQueryClient } from "@tanstack/solid-query";
import { readPodcastQueryKey, readPodcastsQueryKey, updatePodcastImageMutation } from "../client/@tanstack/solid-query.gen";
import { PodcastPublic } from "../client";

export default function UploadImage(props: { podcastId: string }) {
  const queryClient = useQueryClient();

  const [uploading, setUploading] = createSignal(false);
  const [statusText, setStatusText] = createSignal<string | null>(null);
  const updatePodcastImage = createMutation(() => ({
    ...updatePodcastImageMutation(),
    onSuccess(data, vars) {
      queryClient.setQueryData(readPodcastQueryKey({ path: vars.path }), data);
      queryClient.setQueryData(readPodcastsQueryKey(), (oldData: PodcastPublic[]) => oldData ? [...oldData.filter((x) => x.id !== data.id), data] : oldData);
    },
  }))

  const dropzone = createDropzone({
    onDrop(files: File[]) {
      if (!files[0]) {
        throw new Error("No file was uploaded");
      }

      setStatusText("Uploading...");
      setUploading(true);

      updatePodcastImage.mutate({
        body: {
          image: files[0],
        },
        path: {
          podcast_id: props.podcastId,
        }
      }, {
        onSuccess() {
          setStatusText("Podcast image uploaded!");
          setUploading(false);
        },
        onError(error, _variables, _context) {
          setStatusText(`Error uploading: ${error.detail}`);
          setUploading(false);
        },
      });
    }
  });

  return <>
    <Show when={statusText()}>
      <div role="alert" class="alert">
        <Info class="stroke-primary h-6 w-6 shrink-0" />
        <p>{statusText()}</p>
      </div>
    </Show>
    <Show when={!uploading()}>
      <div {...dropzone.getRootProps()} class="bg-base-200 rounded-lg shadow-sm flex flex-col items-center p-6 mb-6">
        <input {...dropzone.getInputProps()} />
        <UploadIcon size="42" />
        <p class="mt-4 text-center">
          {dropzone.isDragActive ? "Drop podcast image here..." : "Drag podcast image here to upload, or click to open"}
        </p>
      </div>
    </Show>
  </>;
}