import { useMemo } from 'react'
import Image from 'next/image'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import PropertyTypeRadio from '@/components/reusable-components/add-property/PropertyTypeRadio'
import PropertyRentDuration from '@/components/reusable-components/add-property/PropertyRentDuration'
import { useTranslation } from '@/components/context/TranslationContext'
import { useSelector } from 'react-redux'
import { isRTL } from '@/utils/helperFunction'
import { RiSparkling2Fill } from 'react-icons/ri'
import { Skeleton } from '@/components/ui/skeleton'
// Property Details Tab Component
const PropertyDetailsTab = ({
selectedCategory,
handleRemoveCategory,
handleUpdatePropertyForm,
propertyFormData,
handleCheckRequiredFields,
isEditing = false,
selectedLanguage,
setSelectedLanguage,
languages = [],
translations = [],
handleMultiLangChange,
handleGenerateAIDescription,
isDescriptionGenerating
}) => {
const t = useTranslation()
const isRtl = isRTL()
const activeLanguage = useSelector(state => state.LanguageSettings?.active_language)
const defaultLanguage = useSelector(state => state.LanguageSettings?.default_language)
const currentLanguage = useSelector(state => state.LanguageSettings?.current_language) || {}
const availableLanguages = useSelector(state => state.LanguageSettings?.languages) || []
const webSettings = useSelector(state => state.WebSetting?.data) || {}
// Determine the system default language (could be English or any other language)
const systemDefaultLanguage = useMemo(() => {
// Try to find the default language object in available languages
if (defaultLanguage) {
const defaultLang = availableLanguages.find(lang =>
lang.code === defaultLanguage || lang.id === defaultLanguage
)
if (defaultLang) return defaultLang
}
// If current language exists, use it
if (currentLanguage && currentLanguage.id) {
return currentLanguage
}
// Fallback to English if nothing else is available
return { id: "English", name: "English", code: "en" }
}, [defaultLanguage, currentLanguage, availableLanguages])
// Combine system languages with any additional languages passed as props
const allLanguages = useMemo(() => {
// Use Map to ensure uniqueness
const languageMap = new Map()
// First add current language from Redux if it exists and has required properties
if (currentLanguage && currentLanguage.id) {
languageMap.set(currentLanguage.code || currentLanguage.id, currentLanguage)
}
// Add system default language if not already added
const defaultKey = systemDefaultLanguage.code || systemDefaultLanguage.id
if (!languageMap.has(defaultKey)) {
languageMap.set(defaultKey, systemDefaultLanguage)
}
// Add languages from Redux state
availableLanguages.forEach(lang => {
// Skip if we already have this language
if (!languageMap.has(lang.code)) {
languageMap.set(lang.code, lang)
}
})
// Add any additional languages from props that aren't already included
languages.forEach(lang => {
const key = typeof lang === 'object' ? (lang.code || lang.id) : lang
if (key && !languageMap.has(key)) {
languageMap.set(key, lang)
}
})
return Array.from(languageMap.values())
}, [currentLanguage, systemDefaultLanguage, availableLanguages, languages])
// Find the current translation for the selected language
const findTranslation = (languageId) => {
return translations.find(item => {
if (typeof languageId === 'object') {
return item.language_id === languageId.id;
}
return item.language_id === languageId;
});
};
// Get value for a specific field in the selected language
const getTranslationValue = (languageId, field) => {
const translation = findTranslation(languageId);
return translation ? translation[field] || "" : "";
};
// Determine if a language is selected
const isLanguageSelected = (lang) => {
if (typeof selectedLanguage === 'object' && typeof lang === 'object') {
return selectedLanguage.id === lang.id;
}
if (typeof selectedLanguage === 'string' && typeof lang === 'string') {
return selectedLanguage === lang;
}
return false;
};
// Check if a language is the default language
const isDefaultLanguage = (lang) => {
// Handle case when lang is undefined
if (!lang) return false;
// Handle object comparison
if (typeof lang === 'object' && typeof systemDefaultLanguage === 'object') {
// Compare by id, code, or name for flexibility
return (
(lang.id && systemDefaultLanguage.id && lang.id === systemDefaultLanguage.id) ||
(lang.code && systemDefaultLanguage.code && lang.code === systemDefaultLanguage.code) ||
(lang.name && systemDefaultLanguage.name && lang.name === systemDefaultLanguage.name)
)
}
// Handle string comparison
if (typeof lang === 'string' && typeof systemDefaultLanguage === 'object') {
return (
lang === systemDefaultLanguage.id ||
lang === systemDefaultLanguage.code ||
lang === systemDefaultLanguage.name ||
lang === "English" // For backward compatibility
)
}
// Direct comparison
return lang === systemDefaultLanguage
}
// Check if this is a required language (default or active)
const isRequiredLanguage = (lang) => {
return isDefaultLanguage(lang) || lang === activeLanguage;
}
// Wrapper for handleUpdatePropertyForm to handle default language fields correctly
const handleFieldChange = (e, fieldName) => {
// For standard form events (input, textarea)
if (e && e.target) {
const { name, value } = e.target;
// If this is the default language, update the main property fields
if (isDefaultLanguage(selectedLanguage) || selectedLanguage === activeLanguage) {
if (name === "title") {
// Update both title and generate slug
handleUpdatePropertyForm({
target: {
name: "propertyTitle",
value: value
}
});
} else if (name === "description") {
// Update description
handleUpdatePropertyForm({
target: {
name: "propertyDescription",
value: value
}
});
} else {
// Pass through other field changes
handleUpdatePropertyForm(e);
}
} else {
// For non-default languages, use the translation handler
handleMultiLangChange(selectedLanguage, fieldName || name, value);
}
}
};
return (
<>
{/* Language Tabs */}
{/* Default system language is always first */}
{/* Map through all available languages except the default one */}
{allLanguages
.filter(lang => {
// Filter out default language and undefined/null values
if (!lang) return false
if (typeof lang === 'object' && typeof systemDefaultLanguage === 'object') {
return lang.id !== systemDefaultLanguage.id && lang.code !== systemDefaultLanguage.code
}
return lang !== systemDefaultLanguage
})
.map(language => (
))
}
{/* Selected Category - Only show for default/active language */}