import {
  Alert,
  Button,
  Flex,
  Form,
  Panel,
  PanelBody,
  PanelFooter,
  PanelSection,
  StepIndicator,
  Text,
  LoadingButton,
  Link,
  Spacer,
} from "@hubspot/ui-extensions";
import { ValidarARCA } from "./ValidarARCA";
import { ManageContact } from "./ManageContact";
import { usePanelController, useUIController } from "../hooks";

const HUBSPOT_ID = "51028647";

export const FormMultistep = ({ actions }: { actions: any }) => {
  const {
    formStep,
    formSubmitted,
    currentCUIT,
    showCUITError,
    isLoading,
    disableButton,
    contactInfo,
    showCreationError,
    ticketText,
    handleCUIT,
    handleClosePanel,
    handleSubmit,
    setContactInfo,
    handleUpdateChanges,
  } = usePanelController();

  const { buttonString, panelTitle, currentStep, stepNames } =
    useUIController();

  return (
    <>
      <Text>En el siguiente modal podrá validar el CUIT ingresado</Text>
      <Button
        overlay={
          <Panel
            id="cuitModal"
            title={panelTitle[formStep]}
            width="small"
            variant="modal"
            onClose={handleClosePanel}
          >
            <Form onSubmit={handleSubmit}>
              <PanelBody>
                <PanelSection>
                  <Flex gap="md" direction="column">
                    <StepIndicator
                      currentStep={currentStep[formStep]}
                      stepNames={stepNames(formStep)}
                    />

                    {formSubmitted ? (
                      <Alert title="Gestión finalizada" variant="success">
                        Información cargada exitosamente. Puede crear un ticket
                        o seguir
                        {ticketText && (
                          <>
                            <Text>
                              Se copió al portapapeles el nombre del ticket:
                            </Text>
                            <Text>{ticketText}</Text>
                          </>
                        )}
                      </Alert>
                    ) : (
                      <>
                        {formStep === 0 && (
                          <ValidarARCA
                            handleCUIT={handleCUIT}
                            currentCUIT={currentCUIT}
                            showError={showCUITError}
                          />
                        )}
                        {(formStep === 1 || formStep === 2) && (
                          <ManageContact
                            isNewContact={formStep === 2}
                            information={contactInfo}
                            setInformation={setContactInfo}
                            showCreationError={showCreationError}
                            handleUpdateChanges={handleUpdateChanges}
                          />
                        )}
                      </>
                    )}

                    <Spacer size="medium"></Spacer>
                  </Flex>
                </PanelSection>
              </PanelBody>
              <PanelFooter>
                {formSubmitted ? (
                  <Link
                    href={`https://app.hubspot.com/contacts/${HUBSPOT_ID}/contact/${contactInfo.hs_id}?tab=tickets`}
                    onClick={() => {
                      actions.copyTextToClipboard(ticketText);
                    }}
                  >
                    <Button type="button" variant="primary">
                      Crear ticket
                    </Button>
                  </Link>
                ) : (
                  <LoadingButton
                    type="submit"
                    onClick={() => {
                      if (formStep === 1 || formStep === 2)
                        actions.copyTextToClipboard(ticketText);
                    }}
                    variant="primary"
                    loading={isLoading}
                    disabled={isLoading || disableButton}
                  >
                    {buttonString[formStep]}
                  </LoadingButton>
                )}

                <Button
                  type="button"
                  onClick={() => {
                    handleClosePanel();
                    actions.closeOverlay("cuitModal");
                  }}
                >
                  {formSubmitted === true ? "Salir" : "Cancelar"}
                </Button>
              </PanelFooter>
            </Form>
          </Panel>
        }
      >
        Buscar CUIT
      </Button>
    </>
  );
};