import React from 'react'

import Button from '../Button'
import Divider from '../Divider'
import Dropdown from '../Dropdown'
import Icon from '../Icon'
import StackView from '../StackView'
import Text from '../Text'

type ChurchCenterStatusProps = {
  /**
   * Determines status of Church Center App.
   */
  ccAppEnabled?: boolean

  /**
   * Determines status of publishing to Church Center.
   */
  ccPublishingEnabled?: boolean

  /**
   * Determines status of Church Center Web.
   */
  ccWebEnabled?: boolean

  /**
   * Renders a text description in popover when status is active.
   */
  description: string

  /**
   * Renders a text for Church Center destination button ("Visit {destinationLabel}").
   */
  destinationLabel: string

  /**
   * Renders a text description in popover when status is inactive.
   */
  disabledDescription?: string

  /**
   * Pass props to the Dropdown component.
   */
  dropdownProps?: object

  /**
   * Provide icon overrides for "check", "exclamationTriangle", "external", and "x" icons.
   */
  icons?: object

  /**
   * Where the browser should navigate when destination button is pressed.
   */
  productUrl: string

  /**
   * Where the browser should navigate when settings button is pressed.
   */
  settingsUrl: string
}

export function ChurchCenterStatus({
  ccAppEnabled = false,
  ccPublishingEnabled = false,
  ccWebEnabled = false,
  description,
  destinationLabel,
  disabledDescription = 'People cannot access this product on the web or mobile app.',
  dropdownProps = {},
  icons,
  productUrl,
  settingsUrl,
  ...props
}: ChurchCenterStatusProps) {
  const buttonProps: any = {
    distribution: 'start',
    fontWeight: 400,
    paddingHorizontal: 2,
    radius: 0,
    variant: 'naked',
  }

  const ccEnabled = ccAppEnabled || ccWebEnabled

  const icon = {
    check: 'checkmark',
    exclamationTriangle: 'exclamation-triangle-filled',
    external: 'external',
    x: 'close',
    ...icons,
  }

  return (
    <StackView axis="horizontal" spacing={1} {...props}>
      <Dropdown
        fontWeight={400}
        placement="bottom-end"
        popoverProps={{ width: '280px', ...dropdownProps['popoverProps'] }}
        theme="dark"
        title="Church Center"
        variant="outline"
        {...((!ccEnabled || !ccPublishingEnabled) && {
          iconLeft: { name: icon.exclamationTriangle, size: 'sm' },
        })}
        {...dropdownProps}
      >
        <StackView padding={2} spacing={2}>
          {!ccPublishingEnabled ? (
            <Text size="14px">
              <strong>This product is not published on Church Center.</strong>{' '}
              {disabledDescription}
            </Text>
          ) : !ccEnabled ? (
            <Text size="14px">
              <strong>Church Center is disabled.</strong> {disabledDescription}
            </Text>
          ) : (
            <Text size="14px">{description}</Text>
          )}
          {ccEnabled && ccPublishingEnabled && (
            <StackView axis="horizontal" spacing={3}>
              <StackView axis="horizontal" alignment="center" spacing={0.5}>
                <Icon
                  color={ccWebEnabled ? 'success' : 'error'}
                  name={ccWebEnabled ? icon.check : icon.x}
                  size="sm"
                />
                <Text size="14px" weight={700}>
                  Web
                </Text>
              </StackView>
              <StackView axis="horizontal" alignment="center" spacing={0.5}>
                <Icon
                  color={ccAppEnabled ? 'success' : 'error'}
                  name={ccAppEnabled ? icon.check : icon.x}
                  size="sm"
                />
                <Text size="14px" weight={700}>
                  Mobile app
                </Text>
              </StackView>
            </StackView>
          )}
        </StackView>
        <Divider margin={0.5} />
        <StackView>
          <Button
            external
            title="Update settings"
            to={settingsUrl}
            {...buttonProps}
          />
          {ccEnabled && ccPublishingEnabled && (
            <Button external to={productUrl} {...buttonProps}>
              Visit {destinationLabel}
              <Icon
                color="primary"
                name={icon.external}
                marginLeft={1}
                size="sm"
              />
            </Button>
          )}
        </StackView>
      </Dropdown>
    </StackView>
  )
}