import type { GlobalVariable } from '../../types'

import { cn } from '@langgenius/dify-ui/cn'
import { RiCloseLine } from '@remixicon/react'
import {
  memo,
} from 'react'
import { useTranslation } from 'react-i18next'

import { useStore } from '@/app/components/workflow/store'
import { isInWorkflowPage } from '../../constants'
import { useIsChatMode } from '../../hooks'
import Item from './item'

const Panel = () => {
  const { t } = useTranslation()
  const isChatMode = useIsChatMode()
  const setShowPanel = useStore(s => s.setShowGlobalVariablePanel)
  const isWorkflowPage = isInWorkflowPage()

  const globalVariableList: GlobalVariable[] = [
    ...(isChatMode
      ? [{
          name: 'conversation_id',
          value_type: 'string' as const,
          description: t('globalVar.fieldsDescription.conversationId', { ns: 'workflow' }),
        }, {
          name: 'dialog_count',
          value_type: 'number' as const,
          description: t('globalVar.fieldsDescription.dialogCount', { ns: 'workflow' }),
        }]
      : []),
    {
      name: 'user_id',
      value_type: 'string',
      description: t('globalVar.fieldsDescription.userId', { ns: 'workflow' }),
    },
    {
      name: 'app_id',
      value_type: 'string',
      description: t('globalVar.fieldsDescription.appId', { ns: 'workflow' }),
    },
    {
      name: 'workflow_id',
      value_type: 'string',
      description: t('globalVar.fieldsDescription.workflowId', { ns: 'workflow' }),
    },
    {
      name: 'workflow_run_id',
      value_type: 'string',
      description: t('globalVar.fieldsDescription.workflowRunId', { ns: 'workflow' }),
    },
    // is workflow
    ...((isWorkflowPage && !isChatMode)
      ? [{
          name: 'timestamp',
          value_type: 'number' as const,
          description: t('globalVar.fieldsDescription.triggerTimestamp', { ns: 'workflow' }),
        }]
      : []),
  ]

  return (
    <div
      className={cn(
        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
      )}
    >
      <div className="flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
        {t('globalVar.title', { ns: 'workflow' })}
        <div className="flex items-center">
          <div
            className="flex size-6 cursor-pointer items-center justify-center"
            onClick={() => setShowPanel(false)}
          >
            <RiCloseLine className="size-4 text-text-tertiary" />
          </div>
        </div>
      </div>
      <div className="shrink-0 px-4 py-1 system-sm-regular text-text-tertiary">{t('globalVar.description', { ns: 'workflow' })}</div>

      <div className="mt-4 grow overflow-y-auto rounded-b-2xl px-4">
        {globalVariableList.map(item => (
          <Item
            key={item.name}
            payload={item}
          />
        ))}
      </div>
    </div>
  )
}

export default memo(Panel)