import { Button, Grid, InputAdornment, Stack, TextField, Tooltip, Typography, } from "@mui/material"; import Image from "next/image"; import { t } from "i18next"; import { CustomBoxFullWidth, } from "styled-components/CustomStyles.style"; import React, { useEffect, useState } from "react"; import { alpha, Box, display } from "@mui/system"; import { useTheme } from "@emotion/react"; import InputLabel from "@mui/material/InputLabel"; import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; import dayjs from "dayjs"; import { DateCalendar } from "@mui/x-date-pickers/DateCalendar"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { PickersDay } from "@mui/x-date-pickers/PickersDay"; import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; import CustomModal from "components/modal"; import AccountCircle from '@mui/icons-material/AccountCircle'; import CloudUploadIcon from '@mui/icons-material/CloudUpload'; import EditIcon from '@mui/icons-material/Edit'; import DescriptionIcon from '@mui/icons-material/Description'; import { toast } from "react-hot-toast"; const acceptedFileInputFormat = "application/pdf,image/*,text/plain,.doc, .docx,.txt"; const supportedFormatMultiImages = [ "jpg", "jpeg", "gif", "png", "pdf", "doc", "docx", "deb", ]; const BusinessTin = ({ RestaurantJoinFormik, selectedDates, setSelectedDates, imageOnchangeHandlerForTinImage, singleFileUploadHandlerForTinFile, tinNumberHandler, file, setFile, preview, setPreview, }) => { const theme = useTheme(); const [open, setOpen] = useState(false); const handleFileChange = (e) => { const selected = e.target.files[0]; if (selected) { const fileName = selected.name; const fileExtension = fileName.split('.').pop().toLowerCase(); const forbiddenExtensions = ['js', 'php']; if (forbiddenExtensions.includes(fileExtension)) { toast.error(t("File type not supported")); e.target.value = ''; // Clear the input return; } if (selected.size < 1024 * 1024) { // Set state for UI feedback setFile(selected); // Call preview/image handler imageOnchangeHandlerForTinImage(selected); // Call upload handler singleFileUploadHandlerForTinFile(selected); // Show preview only if image if (selected.type.startsWith("image/")) { const imageUrl = URL.createObjectURL(selected); setPreview(imageUrl); } else { setPreview(null); } } else { // alert(t("File must be less than 1MB")); } } }; const handleDateChange = (date) => { const dateString = date.format("YYYY-MM-DD"); setSelectedDates([dateString]); // ✅ Set as a single-element array }; const handleOpen = () => { setOpen(!open); }; const renderDay = (date, selectedDate, pickersDayProps) => { const isSelected = selectedDate === date.format("YYYY-MM-DD"); return ( ); }; // Helper function to truncate filename with ellipsis before extension const truncateFilename = (filename, maxLength = 25) => { if (filename.length <= maxLength) return filename; const lastDotIndex = filename.lastIndexOf('.'); if (lastDotIndex === -1) { // No extension found, just truncate return filename.substring(0, maxLength - 3) + '...'; } const extension = filename.substring(lastDotIndex); const nameWithoutExt = filename.substring(0, lastDotIndex); const availableLength = maxLength - extension.length - 3; // 3 for "..." if (availableLength <= 0) { return '...' + extension; } return nameWithoutExt.substring(0, availableLength) + '...' + extension; }; return ( <> {t("Business TIN")} ), }} error={ RestaurantJoinFormik.touched.tin && Boolean(RestaurantJoinFormik.errors.tin) } helperText={ RestaurantJoinFormik.touched.tin && RestaurantJoinFormik.errors.tin } sx={{ "& .MuiInputBase-root": { height: "45px", }, "& .MuiInputBase-input": { fontSize: "12px", padding: "0 14px", // Adjust padding to center the text vertically }, }} /> ), endAdornment: ( ), }} /> {open && ( setOpen(false)} > )} {/* Label and Info */} theme.palette.text.primary, }} > {t("TIN Certificate")} theme.palette.neutral[400], }} > ({t("pdf, doc, jpg. File size : max 2 MB")}) {file ? ( {/* Edit Button */} e.stopPropagation()} sx={{ position: "absolute", top: "1rem", right: "1rem", backgroundColor: theme.palette.info.main, color: "white", width: "26px", height: "26px", borderRadius: "0.25rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", transition: "all 0.2s ease-in-out", zIndex: 2, "&:hover": { backgroundColor: theme.palette.info.dark, transform: "scale(1.05)", }, }} > {preview ? ( // Image preview - clickable to view window.open(preview, '_blank')} sx={{ cursor: "pointer", borderRadius: "8px", overflow: "hidden", "&:hover": { opacity: 0.9, }, }} > Uploaded preview ) : ( // PDF/Document preview - two sections design {/* Top Section - PDF Preview with Dark Overlay */} { if (file) { const fileUrl = URL.createObjectURL(file); window.open(fileUrl, '_blank'); } }} sx={{ position: "relative", height: "60px", backgroundColor: alpha(theme.palette.neutral[400], 0.1), borderRadius: "8px 8px 0 0", cursor: "pointer", overflow: "hidden", }} > {/* PDF Preview */} {/* Fallback icon if PDF can't be rendered */} {/* Dark Overlay */} {/* Bottom Section - Filename and Text with Icon */} { if (file) { const fileUrl = URL.createObjectURL(file); window.open(fileUrl, '_blank'); } }} sx={{ padding: "0.75rem", backgroundColor: theme.palette.background.paper, borderRadius: "0 0 8px 8px", cursor: "pointer", transition: "background-color 0.2s ease-in-out", "&:hover": { backgroundColor: alpha(theme.palette.neutral[100], 0.5), }, }} > {/* Document Icon on the left */} {/* Text content */} {truncateFilename(file.name)} {t("Click to view The file")} )} ) : ( {t("Select a file ")} {t("here")} )} ); }; export default BusinessTin;