import { useContext } from "react";
import {
  AppContext,
  AppStyles,
  AppUsedOpenSourceLicences,
  ModalContainer,
  OpenUrl,
} from "../../../../utils";
import { useTranslation } from "react-i18next";
import { AccordionItem } from "../../../../Components/Accordion";
import { FlatList, Text, TouchableOpacity, View } from "react-native";

export default function OpenSourceLicensesModalContent({ navigation }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  return (
    <ModalContainer withoutPadding>
      <FlatList
        data={AppUsedOpenSourceLicences}
        ListFooterComponent={<View style={AppStyles.appBottom} />}
        renderItem={({ item, index }) => (
          <AccordionItem
            key={index}
            disablePaddingBottom
            appContext={appContext}
            title={item.name}
            customDescriptionComponent={
              <>
                <TouchableOpacity
                  activeOpacity={
                    appContext.appTheme.touchableOpacity.activeOpacity
                  }
                  onPress={() => OpenUrl(item.url)}
                >
                  <Text
                    style={[
                      { color: appContext.appTheme.colors.primary },
                      AppStyles.typography12,
                    ]}
                  >
                    {item.url}
                  </Text>
                </TouchableOpacity>

                <Text
                  style={[
                    { color: appContext.appTheme.textSecondary, marginTop: 6 },
                    AppStyles.typography12,
                  ]}
                >
                  {item.licenseInfo}
                </Text>
              </>
            }
          />
        )}
      />
    </ModalContainer>
  );
}
