import React from 'react'
import { Button } from '@/components/ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
import DesignerDrawer from './DesignerDrawer'
import { translateLabel } from './localization'
import { DesignerFieldValue, DesignerLanguageOption, DesignerSelection } from './types'

export interface DesignerLayerController {
  isDesignMode: boolean
  isPanelVisible: boolean
  isSaving: boolean
  isDirty: boolean
  canUndo: boolean
  canRedo: boolean
  selectedLanguage: string
  drawerLanguages: DesignerLanguageOption[]
  setIsPanelVisible: (visible: boolean) => void
  changeLanguage: (cultureName: string) => void
  changeField: (fieldKey: string, value: DesignerFieldValue) => void
  resetContent: () => void
  exitDesignMode: () => void
  save: () => void
  undo: () => void
  redo: () => void
}

interface DesignerLayerProps {
  pageTitle: string
  selection: DesignerSelection | null
  designer: DesignerLayerController
}

/**
 * Tasarim modunun sayfadan bagimsiz arayuzu: durum cubugu ve duzenleme paneli.
 * Tasarim modu kapaliyken hicbir sey render etmez.
 */
const DesignerLayer: React.FC<DesignerLayerProps> = ({ pageTitle, selection, designer }) => {
  const { translate } = useLocalization()

  if (!designer.isDesignMode) {
    return null
  }

  return (
    <>
      <div className="fixed bottom-6 left-6 z-40 flex items-center gap-2 rounded-full bg-slate-900/95 px-3 py-2 text-sm font-medium text-white shadow-xl backdrop-blur">
        <span className="pl-1">{pageTitle}</span>
        <span
          className={`h-2 w-2 rounded-full ${designer.isDirty ? 'bg-amber-400' : 'bg-emerald-400'}`}
          title={
            designer.isDirty
              ? translateLabel(translate, 'Public.designer.unsaved')
              : translateLabel(translate, 'Public.designer.saved')
          }
        />
        <Button
          type="button"
          variant="plain"
          size="sm"
          className="!text-white"
          onClick={() => designer.setIsPanelVisible(!designer.isPanelVisible)}
        >
          {designer.isPanelVisible
            ? translateLabel(translate, 'Public.designer.hidePanel')
            : translateLabel(translate, 'App.PublicDesigner.ShowPanel')}
        </Button>
        <Button
          type="button"
          variant="plain"
          size="sm"
          className="!text-white"
          onClick={designer.exitDesignMode}
        >
          {translateLabel(translate, 'Public.designer.exit')}
        </Button>
      </div>

      <DesignerDrawer
        isOpen={designer.isPanelVisible}
        selection={selection}
        pageTitle={pageTitle}
        selectedLanguage={designer.selectedLanguage}
        languages={designer.drawerLanguages}
        isSaving={designer.isSaving}
        isDirty={designer.isDirty}
        canUndo={designer.canUndo}
        canRedo={designer.canRedo}
        onClose={() => designer.setIsPanelVisible(false)}
        onSave={designer.save}
        onLanguageChange={designer.changeLanguage}
        onReset={designer.resetContent}
        onFieldChange={designer.changeField}
        onUndo={designer.undo}
        onRedo={designer.redo}
      />
    </>
  )
}

export default DesignerLayer