import { Badge, Button, Dialog, Notification, toast } from '@/components/ui'
import { useNavigationIcons } from '@/proxy/menus/navigation-icon.config'
import { useLocalization } from '@/utils/hooks/useLocalization'
import CustomStore from 'devextreme/data/custom_store'
import { useState } from 'react'
import {
  FaChevronLeft,
  FaTrashAlt,
  FaPlusCircle,
  FaPencilAlt,
  FaEye,
  FaSave,
  FaCog,
  FaSistrix,
} from 'react-icons/fa'
import { useNavigate } from 'react-router-dom'
import { GridColumnData } from '../list/GridColumnData'
import { isWorkflowToolbarItemDisabled, useToolbar } from '../list/useToolbar'
import { PermissionResults, RowMode } from './types'
import { GridDto } from '@/proxy/form/models'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { usePermission } from '@/utils/hooks/usePermission'
import { usePWA } from '@/utils/hooks/usePWA'
import { layoutTypes } from '../admin/listForm/edit/types'
import { useStoreState } from '@/store'

const FormButtons = (props: {
  isSubForm?: boolean
  mode: RowMode
  listFormCode: string
  id?: string
  gridDto: GridDto
  commandColumnData: GridColumnData
  dataSource: CustomStore<any, any>
  permissions: PermissionResults
  handleSubmit: (e: any) => void
  refreshData: () => void
  getSelectedRowKeys: () => any[] | Promise<any[]>
  getSelectedRowsData: () => any[]
  getFilter: () => void
  onActionEdit?: () => void
  onActionNew?: () => void
  onActionView?: () => void
}) => {
  const {
    isSubForm,
    mode,
    listFormCode,
    id,
    gridDto,
    commandColumnData,
    dataSource,
    permissions,
    handleSubmit,
    refreshData,
    getSelectedRowKeys,
    getSelectedRowsData,
    getFilter,
    onActionEdit,
    onActionNew,
    onActionView,
  } = props

  const [deleteRowId, setDeleteRowId] = useState<string>()
  const { checkPermission } = usePermission()
  const isPwaMode = usePWA()

  const navigate = useNavigate()
  const { translate } = useLocalization()

  const layout = layoutTypes.grid
  const { toolbarData, toolbarModalData, setToolbarModalData } = useToolbar({
    gridDto,
    listFormCode,
    getSelectedRowKeys,
    getSelectedRowsData,
    refreshData,
    getFilter,
    layout,
  })

  const currentUser = useStoreState((state) => state.auth.user)
  const selectedRowData = getSelectedRowsData()?.[0]
  const rowEvent = {
    row: {
      data: selectedRowData,
      key: id,
      rowType: 'data',
      isEditing: mode === 'edit',
    },
  }

  const resolveVisible = (visible: unknown) => {
    if (typeof visible !== 'function') {
      return visible !== false
    }

    try {
      return Boolean(visible(rowEvent))
    } catch (error) {
      console.error('Button visibility evaluation error:', error)
      return false
    }
  }

  const isToolbarButtonVisible = (item: any) =>
    item.widget === 'dxButton' &&
    !toolbarExcludedNames.includes(item.name) &&
    resolveVisible(item.visible) &&
    resolveVisible(item.options?.visible)

  const isCommandButtonVisible = (item: any) =>
    typeof item !== 'string' &&
    !commandExcludedNames.includes(item.name) &&
    resolveVisible(item.visible)

  const isToolbarButtonDisabled = (item: any) => {
    const workflowDisabled = isWorkflowToolbarItemDisabled(
      item.name,
      gridDto.gridOptions.workflowDto,
      selectedRowData ? [selectedRowData] : [],
      currentUser,
    )

    return workflowDisabled ?? Boolean(item.options?.disabled)
  }

  const openDynamicGridReport = () => {
    if (!id) return

    const reportUrl = `/admin/reports/DynamicGrid/view/${encodeURIComponent(id)}/${encodeURIComponent(listFormCode)}`
    window.open(reportUrl, isPwaMode ? '_self' : '_blank')
  }

  const handleDelete = async (e: any) => {
    //auth check
    e.preventDefault()
    if (!dataSource || !id) {
      return
    }

    try {
      await dataSource.remove(id)
      setDeleteRowId(undefined)
      if (props.onActionNew) {
        props.onActionNew()
      } else {
        navigate(-1)
      }
      toast.push(
        <Notification type="success" duration={2000}>
          {translate('::App.Platform.RecordDeleted')}
        </Notification>,
        {
          placement: 'bottom-end',
        },
      )
    } catch (error: any) {
      toast.push(<Notification title={error.message} type="danger" />, {
        placement: 'bottom-end',
      })
    } 
  }

  const navigationIcon = useNavigationIcons()

  const toolbarExcludedNames = ['deleteAllRecords', 'deleteSelectedRecords', 'refreshButton']
  const hasVisibleToolbarButtons = toolbarData?.some(isToolbarButtonVisible)

  const commandExcludedNames = ['edit', 'delete', 'detail']
  const hasVisibleCommandButtons = commandColumnData?.buttons?.some(isCommandButtonVisible)

  return (
    <>
      <div className="flex flex-row items-center gap-1">
        {toolbarData
          ?.filter(isToolbarButtonVisible)
          .map((item, i) => {
            const IconComp = navigationIcon[item.options?.icon]
            const hasValidIcon =
              IconComp &&
              (typeof IconComp === 'function' ||
                (typeof IconComp === 'object' && 'render' in IconComp))

            return (
              <Button
                key={'toolbarButton-' + i}
                variant="default"
                size="sm"
                icon={hasValidIcon ? <IconComp className="text-gray-400" /> : null}
                disabled={isToolbarButtonDisabled(item)}
                onClick={(e) => item.options?.onClick?.({ ...e, ...rowEvent })}
              >
                {item.options?.text}
              </Button>
            )
          })}

        {hasVisibleToolbarButtons && <Badge innerClass="bg-blue-500" />}

        {commandColumnData?.buttons
          ?.filter(isCommandButtonVisible)
          .map((item: any, i) => {
            return (
              <Button
                key={'commandColumnButton-' + i}
                variant="default"
                size="sm"
                title={item.hint}
                onClick={(e: any) => {
                  if (item.onClick) {
                    item.onClick({ ...e, ...rowEvent })
                  }
                }}
              >
                {item.text}
              </Button>
            )
          })}

        {hasVisibleCommandButtons && <Badge innerClass="bg-blue-500" />}

        {!isSubForm && (
          <Button
            size="sm"
            variant="default"
            icon={<FaChevronLeft />}
            title={translate('::App.Platform.Cancel')}
            onClick={() => {
              if (onActionView && id) {
                onActionView()
              } else {
                navigate(-1)
              }
            }}
          ></Button>
        )}
        {mode != 'new' && (
          <Button
            size="sm"
            variant="solid"
            icon={<FaTrashAlt />}
            title={translate('::App.Platform.Delete')}
            onClick={() => {
              setDeleteRowId(id)
            }}
            {...(permissions.d ? {} : { disabled: true })}
          ></Button>
        )}
        {mode != 'new' && (
          <Button
            size="sm"
            variant="solid"
            color='blue-500'
            icon={<FaPlusCircle />}
            title={translate('::App.Platform.AddNew')}
            onClick={() => {
              if (onActionNew) {
                onActionNew()
              } else {
                navigate(
                  ROUTES_ENUM.protected.admin.formNew.replace(
                    ':listFormCode',
                    encodeURIComponent(listFormCode),
                  ),
                )
              }
            }}
            {...(permissions.c ? {} : { disabled: true })}
          ></Button>
        )}
        {mode == 'view' && (
          <Button
            size="sm"
            variant="solid"
            color="green-600"
            icon={<FaPencilAlt />}
            title={translate('::App.Platform.Edit')}
            onClick={() => {
              if (onActionEdit) {
                onActionEdit()
              } else {
                navigate(
                  ROUTES_ENUM.protected.admin.formEdit
                    .replace(':listFormCode', encodeURIComponent(listFormCode))
                    .replace(':id', encodeURIComponent(id!)),
                )
              }
            }}
            {...(permissions.u ? {} : { disabled: true })}
          ></Button>
        )}
        {(mode == 'edit' || (onActionView && mode == 'new')) && (
          <Button
            size="sm"
            variant="solid"
            color="gray-500"
            icon={<FaEye />}
            title={translate('::App.Platform.Detail')}
            onClick={() => {
              if (onActionView) {
                onActionView()
              } else {
                navigate(
                  ROUTES_ENUM.protected.admin.formView
                    .replace(':listFormCode', encodeURIComponent(listFormCode))
                    .replace(':id', encodeURIComponent(id!)),
                )
              }
            }}
            {...(permissions.r ? {} : { disabled: true })}
          ></Button>
        )}
        {(mode == 'edit' || mode == 'new') && (
          <Button
            size="sm"
            variant="solid"
            icon={<FaSave />}
            title={translate('::App.Platform.Save')}
            onClick={handleSubmit}
            {...(permissions.c || permissions.u ? {} : { disabled: true })}
          ></Button>
        )}
        {id && !isSubForm && (
          <Button
            size="sm"
            variant="solid"
            color="purple-500"
            icon={<FaSistrix />}
            title={translate('::App.Reports.Form')}
            onClick={openDynamicGridReport}
          ></Button>
        )}
        {checkPermission('App.Listforms.Listform.Update') && !isSubForm && (
          <Button
            size="sm"
            variant="solid"
            icon={<FaCog />}
            color="green-500"
            title={translate('::App.Platform.Manage')}
            onClick={() => {
              window.open(
                ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(
                  ':listFormCode',
                  listFormCode,
                ),
                isPwaMode ? '_self' : '_blank',
              )
            }}
          ></Button>
        )}
      </div>
      <Dialog
        isOpen={toolbarModalData?.open || false}
        onClose={() => setToolbarModalData(undefined)}
        onRequestClose={() => setToolbarModalData(undefined)}
      >
        {toolbarModalData?.content}
      </Dialog>
      <Dialog
        id="confirmDelete"
        isOpen={!!deleteRowId}
        onClose={() => setDeleteRowId(undefined)}
        onRequestClose={() => setDeleteRowId(undefined)}
      >
        <h5 className="mb-4">{translate('::App.Platform.Delete')}</h5>

        <p>{translate('::App.Platform.DeleteConfirmation')}</p>

        <div className="text-right mt-6">
          <Button
            className="ltr:mr-2 rtl:ml-2"
            variant="plain"
            onClick={() => {
              setDeleteRowId(undefined)
            }}
          >
            {translate('::App.Platform.Cancel')}
          </Button>
          <Button variant="solid" onClick={handleDelete}>
            {translate('::App.Platform.Delete')}
          </Button>
        </div>
      </Dialog>
    </>
  )
}

export default FormButtons