import { message, Modal } from 'antd'
import React, { useEffect, useState } from 'react'

import { useGetInitialData, useSavePrivilegesForRole } from './helpers'
import { TableTransfer } from './Transfer'

interface PrivilegesAssignModalProps {
  mode?: 'edit' | 'view'
  title?: string
  roleId: string
  trigger: React.ReactElement
  onComplete?: () => void
}

export const PrivilegesAssignModal: React.FC<
  React.PropsWithChildren<PrivilegesAssignModalProps>
> = ({ roleId, trigger, title = `Assign Privileges`, mode = 'edit' }) => {
  const editable = mode === 'edit'
  const [visible, setVisible] = useState(false)
  const [targetKeys, setTargetKeys] = useState<string[]>()

  const { dataSource, initialTargetKeys, refetchTarget, isLoading } =
    useGetInitialData({
      roleId,
      enabled: visible
    })

  useEffect(() => {
    if (visible && !isLoading) {
      setTargetKeys(initialTargetKeys)
    }
    // eslint-disable-next-line
  }, [visible, isLoading])

  const { save, isLoading: saveLoading } = useSavePrivilegesForRole()

  const onChange = (nextTargetKeys: string[]) => {
    setTargetKeys(nextTargetKeys)
  }

  const onSave = async () => {
    try {
      await save({
        data: {
          role_id: roleId,
          privilege_ids: targetKeys?.map((key) => Number(key))
        }
      })

      refetchTarget()
      setVisible(false)
    } catch (error) {
      message.error(error?.response?.data?.message || 'Failed to save')
    }
  }

  const onCancel = () => {
    setVisible(false)
    setTargetKeys(initialTargetKeys)
  }

  const triggerElm = React.cloneElement(trigger, {
    onClick: () => {
      setVisible(true)
    }
  })

  return (
    <>
      {triggerElm}
      <Modal
        title={title}
        visible={visible}
        footer={editable ? undefined : null}
        onOk={onSave}
        onCancel={onCancel}
        confirmLoading={saveLoading}
        cancelButtonProps={{
          disabled: saveLoading
        }}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
        centered
        width="90%"
      >
        <TableTransfer
          mode={mode}
          dataSource={dataSource}
          loading={isLoading}
          targetKeys={targetKeys}
          onChange={onChange}
        />
      </Modal>
    </>
  )
}