import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
import { InputForm } from "@/components/inputForm";
import LabelStatus from "@/components/labelStatus";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, ScrollView, Text, View } from "react-native";

export default function DetailDiscussionGeneral() {
   const { id } = useLocalSearchParams()

   return (
      <>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Diskusi',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} />,
            }}
         />
         <View style={{ flex: 1 }}>
            <ScrollView>
               <View style={[Styles.p15, Styles.mb100]}>
                  <BorderBottomItem
                     borderType="bottom"
                     icon={
                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
                           <MaterialIcons name="chat" size={25} color={'#384288'} />
                        </View>
                     }
                     title="Danantara"
                     subtitle={
                        <LabelStatus category='success' text='BUKA' size="small" />
                     }
                     rightTopInfo="3 Jan 2025"
                     desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
                     leftBottomInfo={
                        <View style={[Styles.rowItemsCenter]}>
                           <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
                           <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>15 Komentar</Text>
                        </View>
                     }
                  />
                  <View style={[Styles.p15]}>
                     <BorderBottomItem
                        borderType="bottom"
                        icon={
                           <Image
                              source={require("../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileExtraSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="3 Jan 2025"
                        desc="sangat berdampak dari berbagai sisi"
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        icon={
                           <Image
                              source={require("../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileExtraSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="3 Jan 2025"
                        desc="semua menjadi terbatas.."
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        icon={
                           <Image
                              source={require("../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileExtraSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="3 Jan 2025"
                        desc="semua menjadi terbatas.."
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        icon={
                           <Image
                              source={require("../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileExtraSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="3 Jan 2025"
                        desc="semua menjadi terbatas.."
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        icon={
                           <Image
                              source={require("../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileExtraSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="3 Jan 2025"
                        desc="semua menjadi terbatas.."
                     />
                     <BorderBottomItem
                        borderType="bottom"
                        icon={
                           <Image
                              source={require("../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileExtraSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="3 Jan 2025"
                        desc="semua menjadi terbatas.."
                     />

                     <BorderBottomItem
                        borderType="bottom"
                        icon={
                           <Image
                              source={require("../../../assets/images/user.jpeg")}
                              style={[Styles.userProfileExtraSmall]}
                           />
                        }
                        title="Amalia Dwi"
                        rightTopInfo="3 Jan 2025"
                        desc="semua menjadi terbatas.."
                     />

                  </View>
               </View>
            </ScrollView>
            <View style={[Styles.ph15, Styles.pv10, { position: 'absolute', bottom: 10, backgroundColor: '#f4f4f4' }]}>
               <InputForm
                  type="default"
                  round
                  placeholder="Kirim Komentar"
                  bg="white"
                  itemRight={
                     <MaterialIcons name="send" size={25} color={'#384288'} />
                  }
               />
            </View>
         </View >
      </>
   )
}