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 }}>
            <View style={{ flex: 5 }}>
               <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>
            <View style={[Styles.p15, { flex: 1 }]}>
               <InputForm
                  type="default"
                  round
                  placeholder="Kirim Komentar"
                  bg="white"
                  itemRight={
                     <MaterialIcons name="send" size={25} color={'#384288'} />
                  }
               />
            </View>
         </View>
      </>
   )
}