import {invoke} from "@forge/bridge";
import ForgeReconciler, {
  Spinner,
  Tab, TabList, TabPanel, Tabs,
  useProductContext
} from '@forge/react';
import React, {useEffect, useState} from 'react';
import {
  DEFAULT_DRAFT_TICKET_ANSWER_CONFIG,
  DEFAULT_KNOWLEDGE_BASE_WRITER_CONFIG,
  DEFAULT_SUMMARY_CLOSE_INFO_CONFIG, ProjectConfig,
} from "../../core/config";
import {Space} from "../../lib/confluence/types";
import {JiraClient} from "../../lib/jira/client/bridge";
import {KnowledgeBaseWriterConfigForm, SelectOption} from "./forms/KnowledgeBaseWriterConfigForm";
import {DraftTicketAnswerConfigForm} from "./forms/DraftTicketAnswerConfigForm";
import {SummaryCloseInfoConfigForm} from "./forms/SummaryCloseInfoConfigForm";

const jira = new JiraClient();

const ProjectConfigPage = () => {
  const context = useProductContext() as any;
  const projectKey = context?.extension?.project?.key;

  // Data fetched asynchronously.
  const [initialProjectConfig, setInitialProjectConfig] = useState<ProjectConfig>();
  const [jiraFieldOptions, setJiraFieldOptions] = useState<any[]>([]);
  const [spaceOptions, setSpaceOptions] = useState<SelectOption[]>([]);
  const [fieldTypeOptions, setFieldTypeOptions] = useState<any[]>([
    { label: 'Markdown', value: 'markdown' },
  ]);

  // Load project config.
  //
  // Notice: The `useForm` of @forge/react does not support loading async values at the moment.
  // https://community.developer.atlassian.com/t/useform-how-to-set-defaultvalues-dynamically-with-storage-values/78290/2
  useEffect(() => {
    if (projectKey) {
      (async () => {
        const projectConfig = await invoke('getProjectConfig', { projectKey });
        setInitialProjectConfig(projectConfig ?? {});
      })();
    }
  }, [projectKey]);

  // Load Jira field options.
  useEffect(() => {
    jira.getAllFields().then((fields) => {
      setJiraFieldOptions(fields.map((field) => {
        return {
          label: field.name,
          value: field.id
        }
      }));
    });

    invoke('confluence.getSpaces').then((res: any) => {
      const options = res.results.map((space: Space) => {
        return {
          label: space.name,
          value: space.id
        }
      });
      options && setSpaceOptions(options);
    });
  }, [])

  if (!projectKey || !initialProjectConfig) {
    return <Spinner/>
  }

  return (
    <Tabs id="project-config-tabs">
      <TabList>
        <Tab>Q&A Bot</Tab>
        <Tab>Knowledge Base Writer</Tab>
        {/*<Tab>Summary Close Info</Tab>*/}
      </TabList>
      <TabPanel>
        <DraftTicketAnswerConfigForm
          projectKey={projectKey}
          initialConfig={initialProjectConfig?.draftTicketAnswer ?? DEFAULT_DRAFT_TICKET_ANSWER_CONFIG}
        />
      </TabPanel>
      <TabPanel>
        <KnowledgeBaseWriterConfigForm
          projectKey={projectKey}
          initialConfig={initialProjectConfig?.knowledgeBaseWriter ?? DEFAULT_KNOWLEDGE_BASE_WRITER_CONFIG}
          jiraFieldOptions={jiraFieldOptions}
          spaceOptions={spaceOptions}
        />
      </TabPanel>
      {/*<TabPanel>*/}
      {/*  <SummaryCloseInfoConfigForm*/}
      {/*    projectKey={projectKey}*/}
      {/*    initialConfig={initialProjectConfig?.summaryCloseInfo ?? DEFAULT_SUMMARY_CLOSE_INFO_CONFIG}*/}
      {/*    jiraFieldOptions={jiraFieldOptions}*/}
      {/*    fieldTypeOptions={fieldTypeOptions}*/}
      {/*  />*/}
      {/*</TabPanel>*/}
    </Tabs>
  )
}

ForgeReconciler.render(
  <React.StrictMode>
    <ProjectConfigPage />
  </React.StrictMode>
);