import { Container, Loading } from '@/components/shared'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Helmet } from 'react-helmet'
import { useParams } from 'react-router-dom'
import FormButtons from './FormButtons'
import FormDevExpress from './FormDevExpress'
import SubForms from './SubForms'
import { FormProps } from './types'
import { useGridData } from './useFormData'
import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
import { Badge } from '@/components/ui'
import { useState } from 'react'
import { NotePanel } from './notes/NotePanel'
import { usePermission } from '@/utils/hooks/usePermission'
import { APP_NAME } from '@/constants/app.constant'

const FormView = (
  props: FormProps = {
    isSubForm: false,
    onActionEdit: () => {},
    onActionNew: () => {},
  },
) => {
  const mode = 'view'
  const { isSubForm, level } = props
  const params = useParams()
  const listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
  const id = props?.id ?? params?.id ?? ''
  const { translate } = useLocalization()
  const MenuIcon = useCurrentMenuIcon('w-5 h-5')
  const { checkPermission } = usePermission()

  const [isNotePanelVisible, setIsNotePanelVisible] = useState(false)
  const isNotePanel = () => {
    return (
      listFormCode &&
      id &&
      !isSubForm &&
      gridDto?.gridOptions?.showNote &&
      checkPermission(gridDto?.gridOptions.permissionDto.n)
    )
  }

  const {
    loading,
    gridDto,
    dataSource,
    commandColumnData,
    filter,
    formData,
    formItems,
    refForm,
    permissionResults,
    fetchData,
  } = useGridData({
    mode,
    listFormCode,
    id,
    isSubForm,
  })

  if (!listFormCode) {
    return <></>
  }

  if (loading) {
    return <Loading type="default" loading={loading}></Loading>
  }

  if (!formData) {
    return <>{translate('::App.NoResults')}</>
  }

  return (
    <>
      <Container
        className={`${isNotePanelVisible && !isSubForm ? 'lg:mr-[375px]' : ''} transition-all duration-300`}
      >
        {!isSubForm && (
          <Helmet
            titleTemplate={`%s | ${APP_NAME}`}
            title={translate('::' + gridDto?.gridOptions.title)}
            defaultTitle={APP_NAME}
          ></Helmet>
        )}
        <div
          className={`flex items-center pb-2 px-2 ${isSubForm ? 'justify-end' : 'justify-between'}`}
        >
          <div className="flex items-center gap-2">
            {MenuIcon}
            {!isSubForm && (
              <>
                <h4 className="text-slate-700 text-sm font-medium leading-none">
                  {translate('::' + gridDto?.gridOptions?.title)}
                </h4>
                ●
                <Badge content={mode} />
              </>
            )}
          </div>
          {permissionResults && (
            <FormButtons
              isSubForm={isSubForm}
              mode={mode}
              listFormCode={listFormCode}
              id={formData?.Id}
              gridDto={gridDto!}
              commandColumnData={commandColumnData!}
              dataSource={dataSource!}
              permissions={permissionResults}
              handleSubmit={() => {}}
              refreshData={fetchData}
              getSelectedRowKeys={() => [id]}
              getSelectedRowsData={() => [formData]}
              getFilter={() => filter}
              onActionEdit={props.onActionEdit}
              onActionNew={props.onActionNew}
            />
          )}
        </div>
        <div className={`${isSubForm ? 'px-2' : ''}`}>
          <FormDevExpress
            mode={mode}
            refForm={refForm}
            formData={formData}
            formItems={formItems}
            setFormData={() => {}}
            listFormCode={listFormCode}
          />
        </div>
        <SubForms
          gridDto={gridDto!}
          formData={formData}
          level={level ?? 0}
          refreshData={fetchData}
        />
      </Container>

      {/* Note Panel - sadece ana formda göster */}
      {isNotePanel() && (
        <NotePanel
          entityName={listFormCode}
          entityId={id}
          isVisible={isNotePanelVisible}
          onToggle={() => setIsNotePanelVisible(!isNotePanelVisible)}
        />
      )}
    </>
  )
}

export default FormView