import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
import { FlagIcon, TrashSimpleIcon } from '@phosphor-icons/react'
import React from 'react'
import { useMessageContext } from 'stream-chat-react'
import {
  DefaultDropdownActionButton,
  MessageActions,
} from 'stream-chat-react/experimental'

const DeleteAction = () => {
  const { handleDelete, message } = useMessageContext('CustomMessageActions')
  if (message.metadata?.payment_status === 'paid') return null
  return (
    <DefaultDropdownActionButton
      onClick={handleDelete}
      aria-label="Delete"
      title="Delete"
      className="bg-marble rounded-full p-2 hover:bg-sand transition-all"
    >
      <TrashSimpleIcon size={16} weight="light" aria-hidden />
    </DefaultDropdownActionButton>
  )
}

const ReportAction = () => {
  const { handleFlag } = useMessageContext('CustomMessageActions')
  return (
    <DefaultDropdownActionButton
      onClick={handleFlag}
      aria-label="Report"
      title="Report"
      className="bg-marble rounded-full p-2 hover:bg-sand transition-all"
    >
      <FlagIcon size={16} weight="light" aria-hidden />
    </DefaultDropdownActionButton>
  )
}

export const CustomMessageActions = () => {
  const { message } = useMessageContext('CustomMessageActions')
  if (message.metadata?.custom_type !== MESSAGE_CUSTOM_TYPE.ATTACHMENT)
    return null
  return (
    <MessageActions
      messageActionSet={[
        { Component: DeleteAction, placement: 'quick', type: 'delete' },
        { Component: ReportAction, placement: 'quick', type: 'flag' },
      ]}
    />
  )
}