mobile-darmasaba/components/itemSectionTanggalTugas.tsx

import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useState } from "react";
import { LayoutChangeEvent, Pressable, View } from "react-native";
import Text from "./Text";

type FileItem = {
   name: string
   extension: string
}

type Props = {
   done?: boolean
   title: string
   dateStart: string
   dateEnd: string
   files?: FileItem[]
   onPress?: () => void
}

// estimasi lebar chip berdasarkan panjang teks
const CHAR_W = 6.5   // lebar rata-rata per karakter (font size 10)
const ICON_W = 17    // icon 13px + margin 4px
const PAD_H = 16     // paddingHorizontal 8 * 2
const GAP = 6
const PLUS_W = 72    // lebar chip "+X lainnya"

function estimateChipWidth(label: string) {
   return PAD_H + ICON_W + label.length * CHAR_W
}

function getVisibleChips(files: FileItem[], containerWidth: number) {
   if (containerWidth === 0) return { visible: [], extra: files.length }

   let used = 0
   const visible: FileItem[] = []

   for (let i = 0; i < files.length; i++) {
      const label = `${files[i].name}.${files[i].extension}`
      const chipW = estimateChipWidth(label)
      const isLast = i === files.length - 1
      const plusChipW = isLast ? 0 : PLUS_W + GAP
      const gapW = visible.length > 0 ? GAP : 0

      if (used + gapW + chipW + plusChipW <= containerWidth) {
         visible.push(files[i])
         used += gapW + chipW
      } else {
         break
      }
   }

   return { visible, extra: files.length - visible.length }
}

function getFileIcon(extension: string): keyof typeof MaterialCommunityIcons.glyphMap {
   const ext = extension.toLowerCase()
   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
   if (ext === 'pdf') return 'file-pdf-box'
   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
   return 'file-outline'
}

const chipStyle = (colors: any) => ({
   flexDirection: 'row' as const,
   alignItems: 'center' as const,
   backgroundColor: colors.dimmed + '5',
   borderRadius: 6,
   borderWidth: 0.5,
   borderColor: colors.icon + '20',
   paddingHorizontal: 8,
   paddingVertical: 4,
})

export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, files = [], onPress }: Props) {
   const { colors } = useTheme()
   const [containerWidth, setContainerWidth] = useState(0)

   const { visible, extra } = getVisibleChips(files, containerWidth)

   function onRowLayout(e: LayoutChangeEvent) {
      const w = e.nativeEvent.layout.width
      if (w !== containerWidth) setContainerWidth(w)
   }

   return (
      <Pressable style={[Styles.mb15, { borderBottomColor: colors.icon + '20', borderBottomWidth: 1 }]} onPress={onPress}>

         {/* Status */}
         <View style={[Styles.rowItemsCenter]}>
            {done != undefined && (
               done ? (
                  <>
                     <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                     <Text>Selesai</Text>
                  </>
               ) : (
                  <>
                     <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                     <Text>Belum Selesai</Text>
                  </>
               )
            )}
         </View>

         {/* Judul tugas */}
         <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.mv10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
            <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
               <MaterialCommunityIcons name="file-table-outline" size={22} color={colors.text} style={[Styles.mr10]} />
               <View style={[Styles.w90]}>
                  <Text style={[Styles.textDefault]}>{title}</Text>
               </View>
            </View>
         </View>

         {/* Tanggal */}
         <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
            <View style={[{ width: '48%' }]}>
               <Text style={[Styles.mb05]}>Tanggal Mulai</Text>
               <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                  <Text style={{ textAlign: 'center' }}>{dateStart}</Text>
               </View>
            </View>
            <View style={[{ width: '48%' }]}>
               <Text style={[Styles.mb05]}>Tanggal Berakhir</Text>
               <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                  <Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
               </View>
            </View>
         </View>

         {/* Lampiran file */}
         {files.length > 0 && (
            <View style={[Styles.mb15]}>
               <View style={[Styles.rowItemsCenter, Styles.mb05]}>
                  <MaterialCommunityIcons name="paperclip" size={13} color={colors.dimmed} style={[Styles.mr10]} />
                  <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
                     {files.length} Lampiran
                  </Text>
               </View>
               <View
                  style={{ flexDirection: 'row', gap: GAP, overflow: 'hidden' }}
                  onLayout={onRowLayout}
               >
                  {visible.map((file, index) => {
                     const label = `${file.name}.${file.extension}`
                     const chipW = Math.min(estimateChipWidth(label), containerWidth * 0.55)
                     return (
                        <View key={index} style={[chipStyle(colors), { width: chipW }]}>
                           <MaterialCommunityIcons
                              name={getFileIcon(file.extension)}
                              size={13}
                              color={colors.dimmed}
                              style={{ marginRight: 4 }}
                           />
                           <Text
                              style={[Styles.textSmallSemiBold, { color: colors.dimmed, flex: 1 }]}
                              numberOfLines={1}
                              ellipsizeMode="tail"
                           >
                              {label}
                           </Text>
                        </View>
                     )
                  })}
                  {extra > 0 && (
                     <View style={[chipStyle(colors)]}>
                        <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
                           +{extra} lainnya
                        </Text>
                     </View>
                  )}
               </View>
            </View>
         )}

      </Pressable>
   )
}