import * as React from 'react'
import { format } from 'date-fns'

import Box from '../Box'
import defaultTheme from '../system/default-theme'
import Divider from '../Divider'
import Dropdown from '../Dropdown'
import Icon from '../Icon'
import Link from '../Link'
import StackView from '../StackView'
import Text from '../Text'
import { cloneChildren } from '../utils'

type ActionsDropdownProps = {
  /** Accepts [Dropdown.Item](/dropdown) and [Dropdown.Link](/dropdown) elements. */
  children?: React.ReactNode

  /** Props for default button state. */
  defaultButtonProps?: object

  /** Provide amount of duplicates as well as a link to resolve them. */
  duplicates?: {
    /** Amount of duplicates. */
    amount: number

    /** [Link](/link) props. */
    linkProps: object
  }

  /** Props for duplicates button state. Activated when `duplicates.amount` is greater than 0. */
  duplicatesButtonProps?: object

  /** Provide date and reason user became inactive as well as a link to reactivate them. */
  inactive?: {
    /** Valid JavaScript Date. */
    date?: Date

    /** Reason user was inactivated. */
    reason: string

    /** [Link](/link) props. */
    linkProps: object
  }

  /** Props for inactive button state. Activated when `inactive.date` is present. */
  inactiveButtonProps?: object

  /** Determines logic for when user is below manager role. */
  isBelowManager?: boolean

  /** Determines logic for when used in People product. */
  isPeopleProduct?: boolean

  /** Callback when "Delete Profile" item is selected. */
  onDeleteProfile?: boolean
}

export function ActionsDropdown({
  children,
  defaultButtonProps = defaultTheme.button.themes.primary.fill,
  duplicates,
  duplicatesButtonProps = {
    color: 'white',
    backgroundColor: 'hsl(25deg 79% 57%)',
    hover: { backgroundColor: 'hsl(25deg 80% 54%)' },
    active: { backgroundColor: 'hsl(25deg 82% 51%)' },
  },
  inactive,
  inactiveButtonProps = {
    color: 'white',
    backgroundColor: '#999B96',
  },
  isBelowManager,
  isPeopleProduct,
  onDeleteProfile,
}: ActionsDropdownProps) {
  const hasDuplicates = duplicates?.amount > 0
  const hasInactiveDate = Boolean(inactive?.date)
  return (
    <Dropdown
      title="Actions"
      iconLeft={
        hasDuplicates || hasInactiveDate
          ? {
              name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
              size: 'lg',
            }
          : undefined
      }
      fontSize="14px"
      fontWeight={400}
      paddingLeft={hasDuplicates || hasInactiveDate ? 1 : undefined}
      paddingVertical={0.25}
      theme={false}
      popoverProps={{ maxWidth: '280px' }}
      placement="bottom-start"
      {...(hasDuplicates
        ? duplicatesButtonProps
        : hasInactiveDate
        ? inactiveButtonProps
        : defaultButtonProps)}
    >
      {hasDuplicates ? (
        <>
          <StackView axis="horizontal" padding={2} spacing={1}>
            <Icon
              name="exclamation-triangle-filled"
              color="#e8833a"
              marginTop="3px"
            />
            <Text size={4}>
              There {duplicates.amount > 1 ? 'are' : 'is'} {duplicates.amount}{' '}
              potential {duplicates.amount > 1 ? 'duplicates' : 'duplicate'} for
              this profile.{' '}
              {isBelowManager ? (
                `An administrator can resolve ${
                  duplicates.amount > 1 ? `them` : `it`
                } in People.`
              ) : (
                <Link {...duplicates.linkProps}>
                  {isPeopleProduct ? 'Review' : 'Review in People'}
                </Link>
              )}
            </Text>
          </StackView>
          <Divider />
        </>
      ) : null}
      {hasInactiveDate ? (
        <>
          <StackView axis="horizontal" padding={2} spacing={1}>
            <Icon name="inactive" color="grey-8" marginTop="3px" />
            <Text size={4}>
              Set inactive on {format(inactive.date, 'MMM dd, yyyy')}
              {inactive.reason && ` (${inactive.reason})`}.{' '}
              {isBelowManager ? (
                'An administrator can reactivate them in People.'
              ) : (
                <Link {...inactive.linkProps}>
                  {isPeopleProduct ? 'Reactivate' : 'Reactivate in People'}
                </Link>
              )}
            </Text>
          </StackView>
          <Divider />
        </>
      ) : null}
      {(hasDuplicates || hasInactiveDate) && <Box height={1.5} />}
      {cloneChildren(children, () => ({
        paddingHorizontal: 2,
      }))}
      {onDeleteProfile ? (
        <Dropdown.Item
          disabled={isBelowManager}
          paddingHorizontal={2}
          onSelect={onDeleteProfile}
        >
          {isPeopleProduct ? 'Delete profile' : 'Delete profile…'}
        </Dropdown.Item>
      ) : null}
      {onDeleteProfile && isBelowManager ? (
        <Box
          marginHorizontal={2}
          padding={1}
          backgroundColor="surfaceTertiary"
          color="foregroundSecondary"
        >
          <Text size={5} lineHeight={2}>
            To delete this profile, an administrator must remove them from
            People.
          </Text>
        </Box>
      ) : null}
      {(hasDuplicates ||
        hasInactiveDate ||
        (onDeleteProfile && isBelowManager)) && <Box height={1} />}
    </Dropdown>
  )
}