import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'

import {getTerminology} from '#/lib/strings/terminology'
import {useTerminologyPreference} from '#/state/preferences'
import {useRequireAuth} from '#/state/session'
import {useSession} from '#/state/session'
import {EventStopper} from '#/view/com/util/EventStopper'
import {useTheme} from '#/alf'
import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
import * as Menu from '#/components/Menu'
import {
  PostControlButton,
  PostControlButtonIcon,
  PostControlButtonText,
} from './PostControlButton'
import {useFormatPostStatCount} from './util'

interface Props {
  isReposted: boolean
  repostCount?: number
  onRepost: () => void
  onQuote: () => void
  big?: boolean
  embeddingDisabled: boolean
}

export const RepostButton = ({
  isReposted,
  repostCount,
  onRepost,
  onQuote,
  big,
  embeddingDisabled,
}: Props) => {
  const t = useTheme()
  const {_} = useLingui()
  const terminologyPreference = useTerminologyPreference()
  const {hasSession} = useSession()
  const requireAuth = useRequireAuth()
  const formatPostStatCount = useFormatPostStatCount()

  return hasSession ? (
    <EventStopper onKeyDown={false}>
      <Menu.Root>
        <Menu.Trigger label={_(getTerminology(terminologyPreference, {
          skeet: msg`Reskeet or quote skeet`,
          post: msg`Repost or quote post`,
          spell: msg`Respell or quote spell`,
        }))}>
          {({props}) => {
            return (
              <PostControlButton
                testID="repostBtn"
                active={isReposted}
                activeColor={t.palette.positive_500}
                label={props.accessibilityLabel}
                big={big}
                {...props}>
                <PostControlButtonIcon icon={Repost} />
                {typeof repostCount !== 'undefined' && repostCount > 0 && (
                  <PostControlButtonText testID="repostCount">
                    {formatPostStatCount(repostCount)}
                  </PostControlButtonText>
                )}
              </PostControlButton>
            )
          }}
        </Menu.Trigger>
        <Menu.Outer style={{minWidth: 170}}>
          <Menu.Item
            label={
              isReposted
                ? _(getTerminology(terminologyPreference, {
                    skeet: msg`Undo reskeet`,
                    post: msg`Undo repost`,
                    spell: msg`Undo respell`,
                  }))
                : _(getTerminology(terminologyPreference, {
                    skeet: msg({message: `Reskeet`, context: `action`}),
                    post: msg({message: `Repost`, context: `action`}),
                    spell: msg({message: `Respell`, context: `action`}),
                  }))
            }
            testID="repostDropdownRepostBtn"
            onPress={onRepost}>
            <Menu.ItemText>
              {isReposted
                ? _(getTerminology(terminologyPreference, {
                    skeet: msg`Undo reskeet`,
                    post: msg`Undo repost`,
                    spell: msg`Undo respell`,
                  }))
                : _(getTerminology(terminologyPreference, {
                    skeet: msg({message: `Reskeet`, context: `action`}),
                    post: msg({message: `Repost`, context: `action`}),
                    spell: msg({message: `Respell`, context: `action`}),
                  }))}
            </Menu.ItemText>
            <Menu.ItemIcon icon={Repost} position="right" />
          </Menu.Item>
          <Menu.Item
            disabled={embeddingDisabled}
            label={
              embeddingDisabled
                ? _(getTerminology(terminologyPreference, {
                    skeet: msg`Quote skeets disabled`,
                    post: msg`Quote posts disabled`,
                    spell: msg`Quote spells disabled`,
                  }))
                : _(getTerminology(terminologyPreference, {
                    skeet: msg`Quote skeet`,
                    post: msg`Quote post`,
                    spell: msg`Quote spell`,
                  }))
            }
            testID="repostDropdownQuoteBtn"
            onPress={onQuote}>
            <Menu.ItemText>
              {embeddingDisabled
                ? _(getTerminology(terminologyPreference, {
                    skeet: msg`Quote skeets disabled`,
                    post: msg`Quote posts disabled`,
                    spell: msg`Quote spells disabled`,
                  }))
                : _(getTerminology(terminologyPreference, {
                    skeet: msg`Quote skeet`,
                    post: msg`Quote post`,
                    spell: msg`Quote spell`,
                  }))}
            </Menu.ItemText>
            <Menu.ItemIcon icon={Quote} position="right" />
          </Menu.Item>
        </Menu.Outer>
      </Menu.Root>
    </EventStopper>
  ) : (
    <PostControlButton
      onPress={() => requireAuth(() => {})}
      active={isReposted}
      activeColor={t.palette.positive_500}
      label={_(getTerminology(terminologyPreference, {
        skeet: msg`Reskeet or quote skeet`,
        post: msg`Repost or quote post`,
        spell: msg`Respell or quote spell`,
      }))}
      big={big}>
      <PostControlButtonIcon icon={Repost} />
      {typeof repostCount !== 'undefined' && repostCount > 0 && (
        <PostControlButtonText testID="repostCount">
          {formatPostStatCount(repostCount)}
        </PostControlButtonText>
      )}
    </PostControlButton>
  )
}