import { useState } from 'react'
import { Divider, IconButton, Menu } from 'react-native-paper'
import ConfirmDialog from './ConfirmDialog'

export default function ListMenu({
  onEdit,
  onCopy,
  onClear,
  onDelete,
  onSelect,
  ids,
}: {
  onEdit: () => void
  onCopy: () => void
  onClear: () => void
  onDelete: () => void
  onSelect: () => void
  ids?: number[]
}) {
  const [showMenu, setShowMenu] = useState(false)
  const [showRemove, setShowRemove] = useState(false)

  const edit = () => {
    setShowMenu(false)
    onEdit()
  }

  const copy = () => {
    setShowMenu(false)
    onCopy()
  }

  const clear = () => {
    setShowMenu(false)
    onClear()
  }

  const remove = () => {
    setShowMenu(false)
    setShowRemove(false)
    onDelete()
  }

  const select = () => {
    onSelect()
  }

  return (
    <Menu
      visible={showMenu}
      onDismiss={() => setShowMenu(false)}
      anchor={
        <IconButton
          onPress={() => setShowMenu(true)}
          icon='more-vert'
        />
      }
    >
      <Menu.Item leadingIcon='done-all' title='Select all' onPress={select} />
      <Menu.Item
        leadingIcon='clear'
        title='Clear'
        onPress={clear}
        disabled={ids?.length === 0}
      />
      <Menu.Item
        leadingIcon='edit'
        title='Edit'
        onPress={edit}
        disabled={ids?.length === 0}
      />
      <Menu.Item
        leadingIcon='content-copy'
        title='Copy'
        onPress={copy}
        disabled={ids?.length === 0}
      />
      <Divider />
      <Menu.Item
        leadingIcon='delete'
        onPress={() => setShowRemove(true)}
        title='Delete'
      />
      <ConfirmDialog
        title={ids?.length === 0 ? 'Delete all' : 'Delete selected'}
        show={showRemove}
        setShow={setShowRemove}
        onOk={remove}
        onCancel={() => setShowMenu(false)}
      >
        {ids?.length === 0
          ? <>This irreversibly deletes records from the app. Are you sure?</>
          : <>This will delete {ids?.length} record(s). Are you sure?</>}
      </ConfirmDialog>
    </Menu>
  )
}