import {
  ActionPanel,
  List,
  Action,
  Icon,
  Form,
  useNavigation,
} from "@raycast/api";
import { useState } from "react";
import { fetchProjects, addProject } from "./api";
import {
  FormValidation,
  showFailureToast,
  useCachedPromise,
  useForm,
} from "@raycast/utils";
import { withSupermemory } from "./withSupermemory";

export default withSupermemory(Command);

function Command() {
  const { isLoading, data: projects, mutate } = useCachedPromise(fetchProjects);

  return (
    <List isLoading={isLoading} searchBarPlaceholder="Search your projects">
      {!isLoading && !projects?.length ? (
        <List.EmptyView
          title="No Projects Found"
          actions={
            <ActionPanel>
              <Action.Push
                icon={Icon.Plus}
                title="Create Project"
                target={<CreateProject />}
                onPop={mutate}
              />
            </ActionPanel>
          }
        />
      ) : (
        projects?.map((project) => (
          <List.Item
            key={project.id}
            icon={Icon.Folder}
            title={project.name}
            subtitle={project.description}
            accessories={[{ tag: project.containerTag }]}
            actions={
              <ActionPanel>
                <Action.Push
                  icon={Icon.Plus}
                  title="Create Project"
                  target={<CreateProject />}
                  onPop={mutate}
                />
              </ActionPanel>
            }
          />
        ))
      )}
    </List>
  );
}

function CreateProject() {
  const { pop } = useNavigation();
  const [isLoading, setIsLoading] = useState(false);
  const { handleSubmit, itemProps } = useForm<{ name: string }>({
    async onSubmit(values) {
      setIsLoading(true);
      try {
        await addProject(values);
        pop();
      } catch (error) {
        await showFailureToast(error, { title: "Failed to add project" });
      } finally {
        setIsLoading(false);
      }
    },
    validation: {
      name: FormValidation.Required,
    },
  });
  return (
    <Form
      navigationTitle="Search Projects / Add"
      isLoading={isLoading}
      actions={
        <ActionPanel>
          <Action.SubmitForm
            icon={Icon.Plus}
            title="Create Project"
            onSubmit={handleSubmit}
          />
        </ActionPanel>
      }
    >
      <Form.TextField
        title="Name"
        placeholder="My Awesome Project"
        info="This will help you organize your memories"
        {...itemProps.name}
      />
    </Form>
  );
}