import { Badge, Button, Dialog, Notification, toast } from '@/components/ui'
import navigationIcon 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 { 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 { GridExtraFilterState } from '../list/Utils'
import { usePWA } from '@/utils/hooks/usePWA'
import { layoutTypes } from '../admin/listForm/edit/types'

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: () => void
  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 [loading, setLoading] = useState(false)
  const [deleteRowId, setDeleteRowId] = useState<string>()
  const [extraFilters, setExtraFilters] = useState<GridExtraFilterState[]>([])
  const { checkPermission } = usePermission()
  const isPwaMode = usePWA()

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

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

  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
    }

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

  const toolbarExcludedNames = ['deleteAllRecords', 'deleteSelectedRecords', 'refreshButton']
  const hasVisibleToolbarButtons = toolbarData?.some(
    (item) => item.widget == 'dxButton' && !toolbarExcludedNames.includes(item.name!),
  )

  const commandExcludedNames = ['edit', 'delete', 'detail']
  const hasVisibleCommandButtons = commandColumnData?.buttons?.some(
    (item) => typeof item !== 'string' && !commandExcludedNames.includes(item.name!),
  )

  return (
    <>
      <div className="flex flex-row items-center gap-1">
        {toolbarData
          ?.filter(
            (item) => item.widget == 'dxButton' && !toolbarExcludedNames.includes(item.name!),
          )
          .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}
                onClick={item.options?.onClick}
              >
                {item.options?.text}
              </Button>
            )
          })}

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

        {commandColumnData?.buttons
          ?.filter((item) => typeof item !== 'string' && !commandExcludedNames.includes(item.name!))
          .map((item: any, i) => {
            return (
              <Button
                key={'commandColumnButton-' + i}
                variant="default"
                size="sm"
                title={item.hint}
                onClick={(e: any) => {
                  if (item.onClick) {
                    const [rowData] = getSelectedRowsData()
                    e.row = { data: rowData }
                    item.onClick(e)
                  }
                }}
              >
                {item.text}
              </Button>
            )
          })}

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

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

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

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

export default FormButtons
