import {invoke} from "@forge/bridge";
import {
  Box, Code,
  ErrorMessage,
  Form, FormFooter,
  FormSection,
  Heading, HelperMessage,
  Label, LoadingButton,
  RequiredAsterisk,
  Stack,
  Textfield,
  useForm,
} from "@forge/react";
import React from "react";
import {
  DRAFT_TICKET_ANSWER_CONFIG_KEY,
  DraftTicketAnswerConfig,
} from "../../../core/config";

export interface DraftTicketAnswerConfigProps {
  projectKey: string;
  initialConfig: DraftTicketAnswerConfig;
}

export const DraftTicketAnswerConfigForm = ({
  projectKey,
  initialConfig
}: DraftTicketAnswerConfigProps) => {
  const { formState, handleSubmit, register, getFieldId } = useForm<DraftTicketAnswerConfig>({
    defaultValues: initialConfig
  });
  const { errors, isSubmitting, touchedFields } = formState;

  const saveConfig = async (newConfig: DraftTicketAnswerConfig) => {
    const storageKey = `${DRAFT_TICKET_ANSWER_CONFIG_KEY}_${projectKey}`;
    const oldConfig = await invoke<DraftTicketAnswerConfig>('storage.get', {
      key: storageKey
    });
    await invoke('storage.set', {
      key: storageKey,
      value: Object.assign(oldConfig, newConfig)
    });
  }

  return (
    <Form onSubmit={handleSubmit(saveConfig, (err) => {
      console.error(err)
    })}>
      <FormSection>
        <Stack space="space.200">
          {/*  Command  */}
          <Box>
            <Label labelFor={getFieldId('command')}>
              <Heading as="h6">
                Command Name<RequiredAsterisk />
              </Heading>
            </Label>
            <Textfield
              {...register('command', { required: true })}
              placeholder="Please input the comand of generator."
            />
            {
              errors?.command && (
                errors?.command?.message ?
                  <ErrorMessage>{errors?.command?.message}</ErrorMessage> :
                  <ErrorMessage>Please input a valid name for generator.</ErrorMessage>
              )
            }
            {!touchedFields?.command && !errors?.command && (
              <HelperMessage>
                The command name of the generator. For example, if the command is <Code>answer</Code>, you trigger with command <Code>/answer</Code>.
              </HelperMessage>
            )}
          </Box>
        </Stack>
      </FormSection>
      <FormFooter align="start">
        <LoadingButton appearance="primary" type="submit" isLoading={isSubmitting}>
          Save
        </LoadingButton>
      </FormFooter>
    </Form>
  )
}