import { SvgDelete1 } from '@chainlink/blocks-icons'
import { Button, ButtonSet } from '../Button'
import { Typography } from '../Typography'
import { ProgressBar } from './ProgressBar'
import { Transactions } from './Transactions'
import type { TransactionModalState } from './types'

const shouldShowCloseButton = ({
  isInescapable,
  isCloseHidden,
  isTransactionComplete,
  isError,
}: {
  isInescapable: boolean
  isCloseHidden: boolean
  isTransactionComplete: boolean
  isError: boolean
}) => {
  if (isTransactionComplete || isError) {
    return true
  }

  if (isInescapable || isCloseHidden) {
    return false
  }

  return true
}

type Props = {
  state: TransactionModalState
  networkExplorerTxUrl?: string
  contextId: string
  stepId: string
  onSuccessClick: VoidFunction
  onCloseClick: VoidFunction
  isInescapable?: boolean
}

export const TransactionalModalTemplate = ({
  state,
  networkExplorerTxUrl,
  contextId,
  stepId,
  onSuccessClick,
  onCloseClick,
  isInescapable = false,
}: Props) => {
  const showCloseButton = shouldShowCloseButton({
    isInescapable,
    isCloseHidden: state.steps[state.currentStepIndex]?.isCloseHidden || false,
    isTransactionComplete: state.isTransactionComplete,
    isError: Boolean(state.error),
  })

  const heading = state.isTransactionComplete
    ? state.successHeading
    : state.steps[state.currentStepIndex]?.label

  const description = state.isTransactionComplete
    ? state.successBody
    : state.steps[state.currentStepIndex]?.description

  return (
    <div
      id="transaction-modal"
      data-context-id={contextId}
      className="grid min-h-[400px] grid-cols-1 overflow-hidden rounded-md bg-background md:grid-cols-[1fr_3fr] lg:min-w-[960px]"
    >
      <aside className="hidden border-r border-border bg-background-alt md:block md:p-10">
        <ProgressBar steps={state.progressBarSteps} />
      </aside>

      <section className="relative flex h-full flex-col bg-background p-6 md:px-20 md:py-10">
        {showCloseButton && (
          <button
            type="button"
            className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full border border-solid border-border bg-background text-muted-foreground transition-colors hover:text-foreground"
            onClick={onCloseClick}
            aria-label="Close transaction modal"
          >
            <SvgDelete1 className="h-4 w-4" />
          </button>
        )}

        <header className="max-w-[80%] md:max-w-[85%]">
          <Typography variant="h5" asChild>
            <h2
              id={
                state.isTransactionComplete
                  ? 'transaction-modal-success'
                  : 'transaction-modal-step'
              }
              data-step-id={state.isTransactionComplete ? 'success' : stepId}
            >
              {heading}
            </h2>
          </Typography>

          {!state.error && description && (
            <Typography variant="body-s" color="muted" className="mt-1">
              {description}
            </Typography>
          )}

          {state.error && (
            <Typography
              variant="body-s"
              color="error"
              className="mt-2"
              id="transaction-modal-error"
              data-step-id="error"
            >
              {state.error}
            </Typography>
          )}
        </header>

        <div className="mt-4 md:hidden">
          <ProgressBar steps={state.progressBarSteps} />
        </div>

        {state.transactions && (
          <div className="mt-8 flex flex-col gap-4">
            <Transactions
              transactions={state.transactions}
              networkExplorerTxUrl={networkExplorerTxUrl}
            />
          </div>
        )}

        <footer className="mt-auto pt-6">
          <ButtonSet
            size="sm"
            className="justify-end [&_button]:!min-w-[120px] [&_button]:!flex-none [&_button]:!basis-auto"
          >
            {state.successLinkHref && state.successLinkText && (
              <Button
                variant="secondary"
                disabled={!state.error && !state.isTransactionComplete}
                onClick={onSuccessClick}
              >
                {state.successLinkText}
              </Button>
            )}

            {showCloseButton && (
              <Button variant="primary" onClick={onCloseClick}>
                {state.closeButtonText || 'Close'}
              </Button>
            )}
          </ButtonSet>
        </footer>
      </section>
    </div>
  )
}